import { Close } from "@mui/icons-material";
import {
  Box,
  IconButton,
  Modal,
  ModalProps,
  Paper,
  Slide,
} from "@mui/material";

interface Props extends ModalProps {
  closeModal: () => void;
}

const FullscreenModal: React.FC<Props> = ({
  children,
  closeModal,
  ...props
}) => {
  return (
    <Modal {...props}>
      <Slide in={props.open} direction="up">
        <Paper
          sx={{
            width: "100%",
            height: "100%",
            borderRadius: 0,
            display: "flex",
            flexDirection: "column",
          }}
        >
          <Box color="text.primary" flex="none">
            <IconButton onClick={closeModal} color="inherit" size="large">
              <Close />
            </IconButton>
          </Box>
          <Box flex={1} overflow="hidden">
            {children}
          </Box>
        </Paper>
      </Slide>
    </Modal>
  );
};

export default FullscreenModal;
