import { Box, Button, Modal, Typography } from "@mui/material";

import { useUiTools } from "@root/uiTools/store";

type ConfirmLeaveModalProps = {
  open: boolean;
  follow: () => void;
  cancel: () => void;
};

export const ConfirmLeaveModal = ({
  open,
  follow,
  cancel,
}: ConfirmLeaveModalProps) => (
  <Modal open={open} onClose={cancel}>
    <Box
      sx={{
        outline: "none",
        position: "absolute",
        overflow: "hidden",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        maxWidth: "620px",
        width: "100%",
        bgcolor: "background.paper",
        borderRadius: "12px",
        boxShadow: 24,
        p: 0,
      }}
    >
      <Box
        sx={{
          boxSizing: "border-box",
          background: "#F2F3F7",
          height: "70px",
          padding: "0 25px",
          display: "flex",
          alignItems: "center",
        }}
      >
        <Typography component="span">
          Пожалуйста, проверьте, что вы заполнили все результаты
        </Typography>
      </Box>
      <Box
        sx={{
          display: "flex",
          justifyContent: "end",
          gap: "10px",
          margin: "20px",
        }}
      >
        <Button
          variant="contained"
          sx={{ width: "100%", maxWidth: "130px" }}
          onClick={cancel}
        >
          Остаться
        </Button>
        <Button
          variant="contained"
          sx={{ width: "100%", maxWidth: "130px" }}
          onClick={follow}
        >
          Покинуть
        </Button>
      </Box>
    </Box>
  </Modal>
);
