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


interface Props {
    header: string;
    text: string;
}

export default function CustomAccordion({ header, text }: Props) {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const upXs = useMediaQuery(theme.breakpoints.up("xs"));
    const [isExpanded, setIsExpanded] = useState<boolean>(false);

    return (
        <Box
            sx={{
                backgroundColor: "white",
                "&:first-of-type": {
                    borderTopLeftRadius: "12px",
                    borderTopRightRadius: "12px",
                },
                "&:last-of-type": {
                    borderBottomLeftRadius: "12px",
                    borderBottomRightRadius: "12px",
                },
                "&:not(:last-of-type)": {
                    borderBottom: `1px solid ${theme.palette.grey2.main}`,
                }
            }}
        >
            <Box
                onClick={() => setIsExpanded(prev => !prev)}
                sx={{
                    height:upMd ? "72px" : undefined,
                    px: "20px",
                    pt: upMd ? "29px" : "26px",
                    pb: upMd ? "21px" : "20px",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    cursor: "pointer",
                    userSelect: "none",
                    rowGap:"10px",
                    flexDirection: upXs ? undefined :"column",
                }}
            >
                <Typography
                    sx={{
                        fontSize: upMd ? undefined : "16px",
                        lineHeight: upMd ? undefined : "19px",
                        fontWeight: 500,
                        color: theme.palette.grey3.main,
                        px: 0,
                    }}
                >{header}</Typography>
                <Box sx={{width:"32px", height:"33px"}}>
                <ExpandIcon isExpanded={isExpanded} />
                </Box>
            </Box>
            {isExpanded &&
                <Box
                    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,
                        }}
                    >{text}</Typography>
                </Box>
            }
        </Box>
    );
}