import { TickOpenClose } from "@/assets/icons/TickOpenClose";
import { Box, SxProps, Typography, useTheme } from "@mui/material";
import { useState, ReactNode } from "react";

interface Props {
  headerText: ReactNode;
  children: ReactNode;
  sx?: SxProps;
}

export const TextAccordion = ({ headerText, children, sx }: Props) => {
  const theme = useTheme();

  const [open, setOpen] = useState(false);

  return (
    <Box
      sx={sx}
      onClick={() => setOpen((old) => !old)}
    >
      <Box
        sx={{
          userSelect: "none",
          display: "flex",
          gap: "10px",
          cursor: "pointer",
          alignItems: "center",
        }}
      >
        {headerText}
        <TickOpenClose
          checked={open}
          sx={{
            "&:hover": {
              color: theme.palette.primary.dark,
            },
          }}
        />
      </Box>
      {open && children}
    </Box>
  );
};