import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import { Typography } from "@mui/material";
import ExpandIcon from "./ExpandIcon";
import { useState } from "react";


interface Props {
    content: [string, string][];
}

export default function AccordionWrapper({ content }: Props) {
    const [expandedId, setExpandedId] = useState<number | null>(null);

    const handleChange = (panelId: number) => (event: React.SyntheticEvent, newExpanded: boolean) => {
        setExpandedId(newExpanded ? panelId : null);
    };

    return (
        <>
            {content.map((accordionItem, index) => (
                <Accordion
                    expanded={expandedId === index}
                    onChange={handleChange(index)}
                    disableGutters
                    key={index}
                    sx={{
                        boxShadow: "none",
                        "&.MuiAccordion-rounded:first-of-type": {
                            borderTopLeftRadius: "12px",
                            borderTopRightRadius: "12px",
                        },
                        "&.MuiAccordion-rounded:last-of-type": {
                            borderBottomLeftRadius: "12px",
                            borderBottomRightRadius: "12px",
                        },
                        "&.MuiAccordion-root:before": {
                            backgroundColor: "#9A9AAF",
                            opacity: 1,
                        }
                    }}>
                    <AccordionSummary
                        expandIcon={<ExpandIcon isExpanded={expandedId === index} />}
                        sx={{
                            height: "72px",
                            px: "20px",
                            pt: "29px",
                            pb: "21px",
                        }}
                    >
                        <Typography sx={{ fontWeight: 500, color: "#4D4D4D", px: 0 }}>{accordionItem[0]}</Typography>
                    </AccordionSummary>
                    <AccordionDetails sx={{ px: "20px", py: "25px", backgroundColor: "#F1F2F6" }}>
                        <Typography sx={{ color: "#4D4D4D" }}>{accordionItem[1]}</Typography>
                    </AccordionDetails>
                </Accordion>
            ))}
        </>
    );

}