import { Modal, Box, Typography, Button, useTheme } from "@mui/material";
import { useNavigate } from "react-router-dom";

type WarnModalProps = {
  open: boolean;
  setOpen: (isOpen: boolean) => void;
};

export const WarnModal = ({ open, setOpen }: WarnModalProps) => {
  const theme = useTheme();
  const navigate = useNavigate();

  return (
    <Modal
      open={open}
      onClose={() => setOpen(false)}
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Box
        sx={{
          margin: "10px",
          padding: "25px",
          maxWidth: "600px",
          borderRadius: "5px",
          textAlign: "center",
          background: theme.palette.background.default,
        }}
      >
        <Box>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Верификация не пройдена.
          </Typography>
        </Box>
        <Box
          sx={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            flexWrap: "wrap",
            gap: "20px",
            marginTop: "15px",
          }}
        >
          <Button variant="pena-outlined-purple" onClick={() => setOpen(false)}>
            Отмена
          </Button>
          <Button
            variant="pena-outlined-purple"
            onClick={() => navigate("/settings")}
          >
            Пройти верификацию
          </Button>
        </Box>
      </Box>
    </Modal>
  );
};
