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

export type CategoryType =
  | "Tourism"
  | "Services"
  | "RealEstate"
  | "Auto"
  | "Health"
  | "Research"
  | "Production"
  | "Repair"
  | "Education";

export type Template = {
  quizId: string;
  picture: string;
  title: string;
  categoryDescription?: string;
};

export type Category = {
  category: string;
  categoryType: CategoryType;
  templates: Template[];
};

type TemplateProps = {
  template: Category;
};

export const Template = ({
  template: { category, templates },
}: TemplateProps) => {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1100));
  const isTablet = useMediaQuery(theme.breakpoints.down("md"));

  return (
    <>
      <Box
        sx={{ display: "flex", alignItems: "baseline", mt: "28px", mb: "40px" }}
      >
        <Typography variant="h5">{category}</Typography>
        <Box
          sx={{
            flexGrow: 1,
            width: "auto",
            height: "10px",
            borderBottom: "1px solid #9A9AAF",
            mx: "5px",
            mb: "0px",
          }}
        />
        <Typography sx={{ color: "#4D4D4D" }}>({templates.length})</Typography>
      </Box>
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: isTablet ? "auto" : "1fr 1fr 1fr",
          gap: isSmallMonitor ? "15px" : "40px",
          justifyContent: isTablet ? "center" : "normal",
        }}
      >
        {templates.map((template) => (
          <QuizTemplateCard
            key={template.quizId}
            category={category}
            template={template}
          />
        ))}
      </Box>
    </>
  );
};
