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

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

export const PrePaymentModal = ({ open, setOpen }: PrePaymentModalProps) => {
  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",
          outline: "none",
          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="outlined"
            onClick={() => setOpen(false)}
            sx={{
              color: theme.palette.primary.main,
              "&:hover": { color: theme.palette.grey2.main },
            }}
          >
            Отмена
          </Button>
          <Button
            variant="outlined"
            onClick={() => navigate("/tariffs")}
            sx={{
              color: theme.palette.primary.main,
              "&:hover": { color: theme.palette.grey2.main },
            }}
          >
            Пополнить
          </Button>
        </Box>
      </Box>
    </Modal>
  );
};
