front-hub/src/pages/Faq/AccordionWrapper.tsx

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


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

export default function AccordionWrapper({ content }: Props) {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    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: `0px 100px 309px rgba(210, 208, 225, 0.24), 
                                    0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
                                    0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
                                    0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                                    0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
                                    0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
                        "&.MuiAccordion-rounded:first-of-type": {
                            borderTopLeftRadius: "12px",
                            borderTopRightRadius: "12px",
                        },
                        "&.MuiAccordion-rounded:last-of-type": {
                            borderBottomLeftRadius: "12px",
                            borderBottomRightRadius: "12px",
                        },
                        "&.MuiAccordion-root:before": {
                            backgroundColor: theme.palette.grey2.main,
                            opacity: 1,
                        }
                    }}>
                    <AccordionSummary
                        expandIcon={<ExpandIcon isExpanded={expandedId === index} />}
                        sx={{
                            height: "72px",
                            px: "20px",
                            pt: upMd ? "29px" : "26px",
                            pb: upMd ? "21px" : "20px",
                        }}
                    >
                        <Typography
                            sx={{
                                fontSize: upMd ? undefined : "16px",
                                lineHeight: upMd ? undefined : "19px",
                                fontWeight: 500,
                                color: theme.palette.grey3.main,
                                px: 0,
                            }}
                        >{accordionItem[0]}</Typography>
                    </AccordionSummary>
                    <AccordionDetails
                        sx={{
                            px: "20px",
                            py: upMd ? "25px" : undefined,
                            pt: upMd ? undefined : "15px",
                            pb: upMd ? undefined : "25px",
                            backgroundColor: "#F1F2F6"
                        }}
                    >
                        <Typography
                            sx={{
                                fontSize: upMd ? undefined : "16px",
                                lineHeight: upMd ? undefined : "19px",
                                color: theme.palette.grey3.main,
                            }}
                        >{accordionItem[1]}</Typography>
                    </AccordionDetails>
                </Accordion>
            ))}
        </>
    );

}