import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";

import { Answers } from "./Answers";
import { QuestionsResponse } from "@api/statistic";
import { FC } from "react";
import { Funnel } from "./FunnelAnswers/Funnel";
import { Results } from "./Results";

type AnswersStatisticsProps = {
  data: QuestionsResponse | null;
};

export const AnswersStatistics: FC<AnswersStatisticsProps> = ({ data }) => {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1150));
  const isMobile = useMediaQuery(theme.breakpoints.down(850));

  return (
    <Box sx={{ marginTop: "120px" }}>
      <Typography
        component="h3"
        sx={{
          fontSize: "24px",
          fontWeight: "bold",
          color: theme.palette.text.primary,
        }}
      >
        Статистика по ответам
      </Typography>
      <Box
        sx={{
          display: isSmallMonitor && !isMobile ? "flex" : "block",
          gap: "40px",
        }}
      >
        <Answers data={data?.Questions || null} />
        <Funnel data={data?.Funnel || []} funnelData={data?.FunnelData || []} />
      </Box>
      <Results data={data?.Results || null} />
    </Box>
  );
};
