import {
  Box,
  IconButton,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { Add } from "@mui/icons-material";
import { EditIcon } from "@icons/questionsPage/EditIcon";
import CloseIcon from "@mui/icons-material/Close";
import { Dispatch, FC, SetStateAction } from "react";

type InfoBannerProps = {
  setBannerVisible: Dispatch<SetStateAction<boolean>>;
};

export const InfoBanner: FC<InfoBannerProps> = ({ setBannerVisible }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  return (
    <Box
      sx={{
        position: "absolute",
        top: "30px",
        right: "30px",
        padding: "20px",
        borderRadius: "12px",
        background: "#fff",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        zIndex: 2,
        boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
        animation: "fadeIn 0.5s",
      }}
    >
      <Box
        sx={{
          maxWidth: isMobile ? "253px" : "345px",
          color: "#9A9AAF",
          display: "flex",
          flexDirection: "column",
          gap: "10px",
        }}
      >
        <Box sx={{ display: "flex", justifyContent: "space-between" }}>
          <Typography>Добавьте больше вопросов кнопкой</Typography>
          <Box
            sx={{
              width: "20px",
              height: "20px",
              color: "rgba(154, 154, 175, 0.5)",
              backgroundColor: "#eeeff4",
              borderRadius: "6px",
              border: "1.5px dashed rgba(154, 154, 175, 0.5)",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Add fontSize={"small"} />
          </Box>
        </Box>
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <Typography>
            Настраивайте условия их отображения в квизе с помощью
          </Typography>
          <EditIcon />
        </Box>
      </Box>
      <IconButton
        sx={{
          position: "absolute",
          top: "-10px",
          right: "-10px",
          width: "30px",
          height: "30px",
          background: "#4D4D4D",
          opacity: "0.2",
          BorderRadius: "50%",
          color: "#fff",
          "&:hover": {
            background: "black",
          },
        }}
        onClick={() => setBannerVisible(false)}
      >
        <CloseIcon fontSize={"medium"} />
      </IconButton>
    </Box>
  );
};
