import { useState } from "react";
import Accordion from "@mui/material/Accordion";

import {
  AccordionDetails,
  AccordionSummary,
  Box,
  Container,
  Link,
  Typography,
} from "@mui/material";

import styles from "./FAQ-styles";

import { ExpandMore } from "@mui/icons-material";

export function FAQ() {
  const [expanded, setExpanded] = useState(false);

  const handleChange = (panel) => (event, isExpanded) => {
    setExpanded(expanded === panel ? false : panel);
  };

  const title = (
    <Typography component="h2" variant="h4" gutterBottom sx={styles.title}>
      Frequently asked questions
    </Typography>
  );

  return (
    <Container id="faq" sx={styles.root}>
      <Box sx={styles.faqBox}>
        {title}
        <Accordion
          expanded={expanded === "panel1"}
          onChange={handleChange("panel1")}
        >
          <AccordionSummary expandIcon={<ExpandMore />} id="panel1d-header">
            <Typography component="h3" variant="subtitle2">
              How do I submit my model for examination?
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography variant="body2" gutterBottom sx={styles.description}>
              We support examination of all models published on Hugging Face. To
              examine a model, simply provide the Hugging Face path to the
              model, a Hugging Face token with read permission, and select the
              service/test that you want to perform. To examine a private model,
              simply provide the model name, API endpoint, and API token.
            </Typography>
          </AccordionDetails>
        </Accordion>
        <Accordion
          expanded={expanded === "panel2"}
          onChange={handleChange("panel2")}
        >
          <AccordionSummary expandIcon={<ExpandMore />} id="panel2d-header">
            <Typography component="h3" variant="subtitle2">
              How long does it take to examine my model?
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography variant="body2" gutterBottom sx={styles.description}>
              The examination time of a model is dependent on the model's
              inference time. For a 7B parameter model such as LLaMA 2, the
              average examination time is 15 minutes.
            </Typography>
          </AccordionDetails>
        </Accordion>
        <Accordion
          expanded={expanded === "panel3"}
          onChange={handleChange("panel3")}
        >
          <AccordionSummary expandIcon={<ExpandMore />} id="panel3d-header">
            <Typography component="h3" variant="subtitle2">
              What makes your services stand out from others in the market?
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography variant="body2" gutterBottom sx={styles.description}>
              Our product unifies the broad landscape of model safety and
              security concerns via a single report. We conduct a wide range of
              tests under each service, providing users with detailed breakdowns
              and insights of the results. Users can compare models via our
              interactive leaderboard and export results as a PDF report.
            </Typography>
          </AccordionDetails>
        </Accordion>
        <Accordion
          expanded={expanded === "panel4"}
          onChange={handleChange("panel4")}
        >
          <AccordionSummary expandIcon={<ExpandMore />} id="panel4d-header">
            <Typography component="h3" variant="subtitle2">
              How can the examination improve my model?
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography variant="body2" gutterBottom sx={styles.description}>
              The examination produces a report of the model's robustness across
              different areas of safety and security. These results reveal
              threats that the model can be guarded against and identify areas
              where model safety can be improved.
            </Typography>
          </AccordionDetails>
        </Accordion>
      </Box>
    </Container>
  );
}

export default FAQ;