import {
	Accordion,
	AccordionDetails,
	AccordionSummary,
	Box,
} from "@mui/material";
import { ReactNode, useState, type FC } from "react";

interface AccordionItem {
	id: string;
	title: ReactNode;
	content: ReactNode;
}

interface ControlledAccordionProps {
	items: AccordionItem[];
	onExpanded?: (id: string) => void;
}

export const ControlledAccordion: FC<ControlledAccordionProps> = ({
	items,
}) => {
	const [expanded, setExpanded] = useState<number | false>(false);

	const handleChange =
		(panel: number) =>
		(_event: React.SyntheticEvent, isExpanded: boolean) => {
			setExpanded(isExpanded ? panel : false);
		};

	return (
		<Box
			sx={{
				elevation: 10,
			}}
		>
			{items?.map((item, index) => (
				<Accordion
					key={index}
					elevation={5}
					expanded={expanded === index}
					onChange={handleChange(index)}
				>
					<AccordionSummary
						aria-controls="panel1bh-content"
						id="panel1bh-header"
					>
						{item.title}
					</AccordionSummary>
					<AccordionDetails>{item.content}</AccordionDetails>
				</Accordion>
			))}
		</Box>
	);
};
