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

interface Props {
    open: boolean;
    onClose: () => void;
    onCreate: () => void;
}


export const PayModal = ({
    open,
    onClose,
    onCreate
}: Props) => {
    return (
        <Modal
            open={open}
            onClose={onClose}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
        >
            <Box
                sx={{
                    position: "absolute" as "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    maxWidth: "550px",
                    width: "100%",
                    bgcolor: "background.paper",
                    borderRadius: "12px",
                    boxShadow: 24,
                    p: "30px",
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    gap: 2
                }}
            >
                <Typography sx={{ width: "100%", textAlign: "center", mb: "25px" }}>
                    Данная услуга предоставляется за 500 рублей/опрос. Готовы оплатить?
                </Typography>
                <Box sx={{ display: 'flex', gap: 2 }}>
                    <Button sx={{width: "100px"}} variant="outlined" onClick={onClose}>
                        Нет
                    </Button>
                    <Button sx={{width: "100px"}} variant="contained" onClick={onCreate}>
                        Да
                    </Button>
                </Box>
            </Box>
        </Modal>
    );
}