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

import { Answers } from "./Answers";
import { Funnel } from "./Funnel";
import { Results } from "./Results";

import { ReactComponent as OpenIcon } from "@icons/Analytics/open.svg";

export const AnswersStatistics = () => {
  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>
      <ButtonBase
        sx={{
          marginTop: "35px",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          gap: "5px",
          padding: "10px",
          width: "100%",
          maxWidth: "160px",
          background: "#FFFFFF",
          border: "1px solid #9A9AAF",
          borderRadius: "8px",
          color: theme.palette.brightPurple.main,
          boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
        }}
      >
        <Typography>Фильтры</Typography>
        <Box>
          <OpenIcon />
        </Box>
      </ButtonBase>
      <Box
        sx={{
          display: isSmallMonitor && !isMobile ? "flex" : "block",
          gap: "40px",
        }}
      >
        <Answers />
        <Funnel />
      </Box>
      <Results />
    </Box>
  );
};