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

interface Props {
  header: ReactNode;
  divide?: boolean;
  privilege: ReactNode;
}

export default function CustomSaveAccordion({ header, divide = false, privilege }: 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.gray.main}`,
        },
      }}
    >
      <Box
        onClick={() => setIsExpanded((prev) => !prev)}
        sx={{
          minHeight: "72px",
          px: "20px",
          display: "flex",
          alignItems: "stretch",
          justifyContent: "space-between",
          cursor: "pointer",
          userSelect: "none",
          rowGap: "10px",
          flexDirection: upXs ? undefined : "column",
        }}
      >
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            width: "100%",
            fontSize: upMd ? undefined : "16px",
            lineHeight: upMd ? undefined : "19px",
            fontWeight: 500,
            color: theme.palette.gray.dark,
            px: 0,
          }}
        >
          {header}
        </Box>
        <Box
          sx={{
            pl: "20px",
            width: "52px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            borderLeft: divide ? "1px solid #000000" : "none",
          }}
        >
          <ExpandIcon isExpanded={isExpanded} />
        </Box>
      </Box>
      {isExpanded && privilege}
    </Box>
  );
}
