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

import type { FC } from "react";

interface Iprops {
  header: string;
  image: string;
  text: string;
}

export const QuizCard: FC<Iprops> = ({ header, image, text }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const isTablet = useMediaQuery(theme.breakpoints.down(1113));

  return (
    <Fade style={{ display: "flex" }} timeout={1000} in unmountOnExit>
      <Box
        sx={{
          width: "100%",
          minHeight: "462px",
          backgroundColor: "#ffffff",
          display: "flex",
          justifyContent: "space-between",
          flexWrap: "wrap",
          padding: isTablet ? "20px" : "22px 22px 22px 50px",
          borderRadius: "12px",
          marginTop: isMobile ? "50px" : "60px",
          boxSizing: "border-box",
          boxShadow:
            "0px 6.6501px 5.32008px 0px rgba(126, 42, 234, 0.03), 0px 12.52155px 10.01724px 0px rgba(126, 42, 234, 0.04), 0px 22.33631px 17.86905px 0px rgba(126, 42, 234, 0.04)",
        }}
      >
        <Box
          sx={{
            height: "70%",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-around",
            paddingTop: isTablet ? 0 : "26px",
          }}
        >
          <Typography
            variant="h6"
            fontSize={"36px"}
            lineHeight={"42.66px"}
            maxWidth={"491px"}
          >
            {header}
          </Typography>
          <Box sx={{ maxWidth: "416px", marginTop: "19px" }}>
            <Typography fontSize={"18px"} lineHeight={"21px"} color={"#4D4D4D"}>
              {text}
            </Typography>
          </Box>
        </Box>
        <Box
          sx={{
            width: "100%",
            maxWidth: "550px",
            marginTop: isTablet ? "25px" : 0,
          }}
        >
          <Box
            component={"img"}
            src={image}
            sx={{
              width: "100%",
              backgroundColor: "#c8dade",
              borderRadius: "12px",
            }}
          />
        </Box>
      </Box>
    </Fade>
  );
};