import { Box, Modal } from "@mui/material";
import React from "react";
import { GrFormClose } from "react-icons/gr";

interface ModalProps {
  children?: React.ReactNode;
  open: boolean;
  onClose?: () => void;
  className?: string;
  title?: string;
  style?: any;
}

export default function ModalReact({
  onClose,
  open,
  children,
  className,
  title,
  style,
  ...rest
}: ModalProps) {
  return (
    <Modal
      // <Modal
      style={{ zIndex: 40 }}
      open={open}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
      // onClick={onClose}
      // className="flex flex-col w-[100vw] h-[100vh] items-center justify-center absolute top-0 left-0 z-99"
      // style={{
      //     backgroundColor: "rgba(0,0,0,1)",
      // }}
    >
      <Box
        // <Box
        onClick={(e) => e.stopPropagation()}
        // className={`bg-white ${className}`}
        className={`absolute top-1/2 left-1/2 max-h-[90%] overflow-auto -translate-x-2/4 -translate-y-2/4 w-96 bg-white shadow-default dark:border-strokedark dark:bg-boxdark text-black dark:text-white rounded overflow-x-hidden ${className}`}
      >
        <div className="w-full bg-white dark:bg-black p-5 top-0 sticky z-1 h-[10%]">
          <div className="font-bold text-black-2 dark:text-white w-full">
            {title}
          </div>
          <button className="absolute top-2 right-2 " onClick={onClose}>
            <GrFormClose size={20} />
          </button>
        </div>
        <section
          className={`relative flex flex-col h-[90%] overflow-auto`}
          style={style}
          {...rest}
        >
          <div>{children}</div>
        </section>
      </Box>
    </Modal>
  );
}