import * as React from "react";
import Box from "@mui/material/Box";
import ModalBox from "@mui/material/Modal";
import { Typography } from "@mui/material";
import { SPACING } from "../../data/spacing";
import { PropTypes } from "prop-types";

export const StrictModal = ({ content, title, open }) => {
  const style = {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: 400,
    bgcolor: "background.paper",
    // border: "2px solid #000",
    boxShadow: 24,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
    gap: SPACING.SMALL,
    borderRadius: 2,
    p: 3,
  };

  return (
    <ModalBox
      open={open}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
    >
      <Box sx={style}>
        <>
          <Box display="inline-block" width="100%" mb={SPACING.SMALL}>
            <Typography
              sx={{
                display: "inline-block",
                mt: "5px",
                fontWeight: "bold",
                textAlign: "center",
                width: "100%",
              }}
            >
              {title}
            </Typography>
          </Box>
          {content}
        </>
      </Box>
    </ModalBox>
  );
};

StrictModal.propTypes = {
  title: PropTypes.any,
  content: PropTypes.any,
  open: PropTypes.any,
};
