import * as React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Unstable_Grid2"; // Grid version 2
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";

import ARTComparisonChart from "@/components/Sections/Scalable/ARTComparisonChart";
import ARTSwitchCard from "@/components/Sections/Scalable/ARTSwitchCard";

export default function FSRTContent() {
  const [checked, setChecked] = React.useState(false);

  const handleChange = (event?: React.ChangeEvent<HTMLInputElement>) => {
    setChecked(event?.target.checked || !checked);
  };

  return (
    <>
      <Grid xs={12} md={8} lg={6}>
        <Box height="auto" width="100%" minWidth="275px">
          <Card variant="outlined">
            <CardContent>
              <Typography
                sx={{
                  fontSize: 20,
                  fontWeight: 500,
                  color: "#000",
                  textAlign: "center",
                }}
                gutterBottom
              >
                Average response time comparison
              </Typography>
              <ARTComparisonChart checked={checked} />
            </CardContent>
          </Card>
        </Box>
      </Grid>
      <Grid xs={12} md={8} lg={6}>
        <ARTSwitchCard checked={checked} handleChange={handleChange} />
      </Grid>
    </>
  );
}