import * as React from "react";
import Accordion from "@mui/material/Accordion";
import AccordionDetails from "@mui/material/AccordionDetails";
import AccordionSummary from "@mui/material/AccordionSummary";
import Typography from "@mui/material/Typography";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

interface faqPropType {
  faqData: { ques: string; ans: string }[];
}

export default function Faq({ faqData }: faqPropType) {
  const [expanded, setExpanded] = React.useState<string | false>(false);

  const handleChange =
    (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
      setExpanded(isExpanded ? panel : false);
    };

  const accordionStyles = {
    boxShadow: "none",
    marginBottom: "10px",
    backgroundColor: "#ffffff",
    "&.Mui-expanded": {
      margin: 0,
      boxShadow: "none",
      borderRadius: "5px",
      padding: "0",
      marginBottom: "10px",
      borderBottom: "none",
      "&:hover": {
        boxShadow: "none",
      },
    },
    "&:hover": {
      boxShadow: "none",
    },
    "&:before": {
      display: "none",
    },
  };

  const accordionSummaryStyles = {
    backgroundColor: "#f9fafb ",
    borderRadius: "0",
    padding: "10px",
    marginBottom: "0",
    boxShadow: "none",
    borderBottom: "1px solid #b1b1b1",
    "&.Mui-expanded": {
      backgroundColor: "#FFFFFF ",
      borderBottom: "none",
      borderRadius: "5px 5px 0 0",
    },
    "&:hover": {
      boxShadow: "none",
    },
  };

  const accordionDetailsStyles = {
    borderRadius: "10px",
    padding: "0px 8px 16px",
  };

  return (
    <div className="w-full max-w-[900px] mx-auto">
      {faqData.map((faq, i) => {
        return (
          <Accordion
            key={i}
            expanded={expanded === `panel${i}`}
            onChange={handleChange(`panel${i}`)}
            sx={accordionStyles}
          >
            <AccordionSummary
              sx={accordionSummaryStyles}
              expandIcon={<ExpandMoreIcon />}
              aria-controls="panel1bh-content"
              id="panel1bh-header"
            >
              <Typography
                component="span"
                sx={{
                  width: "100%",
                  flexShrink: 0,
                  fontSize: { lg: "20px", md: "18px", xs: "14px" },
                  fontWeight: "600",
                }}
              >
                {faq.ques}
              </Typography>
            </AccordionSummary>
            <AccordionDetails sx={accordionDetailsStyles}>
              <Typography sx={{ fontSize: { lg: "17px", xs: "14px" } }}>
                {faq.ans}
              </Typography>
            </AccordionDetails>
          </Accordion>
        );
      })}
    </div>
  );
}