import { Box, Button, Modal, Typography, useMediaQuery, useTheme } from "@mui/material";
interface Props {
    open: boolean;
    cancelDelete: () => void;
    deleteImage: () => void;
}
export default ({
    open,
    cancelDelete,
    deleteImage,
}: Props) => {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(450));


    return (
        <Modal
            open={open}
            onClose={cancelDelete}
        >
            <Box
                sx={{
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    bgcolor: "background.paper",
                    boxShadow: 24,
                    borderRadius: "12px",
                    width: isMobile ? "200px" : "350px",
                    height: "350px",
                    display: "flex",
                    flexDirection: "column",
                }}
            >
                <Typography sx={{
                    // height: isMobile ? "91px" : "70px",
                    backgroundColor: "#F2F3F7",
                    padding: isMobile ? "25px 20px 24px 20px" : "25px 43px 24px 20px",
                    borderRadius: "8px 8px 0px 0px",
                    color: "#9A9AAF",
                    fontSize: "18px",
                    lineHeight: "21.33px"
                }}>
                    Вы уверены, что хотите удалить всю картинку и каждую настройку?
                </Typography>
                <Button sx={{margin: "25px"}} variant="contained" onClick={cancelDelete}>нет</Button>
                <Button sx={{margin: "25px"}} variant="outlined" onClick={deleteImage}>да</Button>

            </Box>
        </Modal>
    );
};