import { ReactNode, useState } from "react";
import { Box, Typography, useTheme } from "@mui/material";
import ExpandIcon from "./ExpandIcon";

interface Props {
	headerText: string;
	children: (callback: () => void) => ReactNode;
}

export default function Collapse({ headerText, children }: Props) {
	const theme = useTheme();
	const [isExpanded, setIsExpanded] = useState<boolean>(false);

	return (
		<Box
			sx={{
				position: "relative",
			}}
		>
			<Box
				onClick={() => setIsExpanded((prev) => !prev)}
				sx={{
					height: "72px",
					p: "16px",
					backgroundColor: theme.palette.menu.main,
					borderRadius: "12px",

					display: "flex",
					justifyContent: "space-between",
					alignItems: "center",
					cursor: "pointer",
					userSelect: "none",
				}}
			>
				<Typography variant="h4">{headerText}</Typography>
				<ExpandIcon isExpanded={isExpanded} />
			</Box>
			{isExpanded && (
				<Box
					sx={{
						mt: "8px",
						position: "absolute",
						zIndex: 100,
						backgroundColor: theme.palette.content.main,
						width: "100%",
					}}
				>
					{children(() => setIsExpanded(false))}
				</Box>
			)}
		</Box>
	);
}