import {Button, Modal, Box, useTheme, Typography} from "@mui/material";
import * as React from "react";
import {useState} from "react";

export default function ModalSizeImage () {
    const theme = useTheme();
    const [open, setOpen] = useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
    return (
        <>
            <Button
                sx={{
                    mt: "20px",
                    fontSize: "16px",
                    lineHeight: "19px",
                    color: theme.palette.orange.main,
                    textDecorationColor: theme.palette.orange.main
                }}
                onClick={handleOpen}>Размер картинок</Button>
            <Modal
                open={open}
                onClose={handleClose}
                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: "540px",
                        width: "100%",
                        minHeight: "632px",
                        bgcolor: "background.paper",
                        borderRadius: "12px",
                        boxShadow: 24,
                        p: 0,
                    }}
                >
                    <Box>
                        <Typography>Размеры картинок</Typography>
                    </Box>
                    <Box></Box>
                    <Box>
                        <Typography>Размеры изображений в квизе</Typography>
                    </Box>
                    <Box></Box>
                </Box>
            </Modal>
        </>

    );
}