import { Modal as MuiModal, Typography, Box, SxProps, Theme } from "@mui/material";

interface ModalProps {
  open: boolean;
  onClose: () => void;
  children: React.ReactNode;
  title?: string;
  sx?: SxProps<Theme>;
}

const style = {
  position: "absolute" as const,
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 400,
  bgcolor: "background.paper",
  boxShadow: 24,
  p: 4,
  borderRadius: 2,
};

export const Modal = ({ open, onClose, children, title, sx }: ModalProps) => {
  return (
    <MuiModal
      open={open}
      onClose={onClose}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
    >
      <Box sx={{ ...style, ...sx }}>
        {title && (
          <Typography
            id="modal-modal-title"
            variant="h6"
            component="h2"
            gutterBottom
          >
            {title}
          </Typography>
        )}
        <Box id="modal-modal-description">{children}</Box>
      </Box>
    </MuiModal>
  );
};