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

interface PaymentConfirmationModalProps {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
  price: number;
}

export const PaymentConfirmationModal = ({
  open,
  onClose,
  onConfirm,
  price,
}: PaymentConfirmationModalProps) => {
  return (
    <Modal open={open} onClose={onClose}>
      <Paper
        sx={{
          position: "absolute" as "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          boxShadow: 24,
          p: 4,
          display: "flex",
          justifyContent: "center",
          flexDirection: "column",
        }}
      >
        <Typography
          id="modal-modal-title"
          variant="h6"
          component="h2"
          mb="20px"
        >
          Вы подтверждаете платёж в сумму{" "}
          {price ? price.toFixed(2) : 0} ₽
        </Typography>
        <Button variant="contained" onClick={onConfirm}>
          купить
        </Button>
      </Paper>
    </Modal>
  );
}; 