import Modal from "react-modal";

type ModalComponentProps = {
  isModalOpen: boolean;
  children: React.ReactNode;
  close: () => void;
};
const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) => {
  return (
    <Modal
      isOpen={isModalOpen}
      onRequestClose={close}
      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] z-100 overflow-y-auto border border-gray-600 max-h-[90%]"
      overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
      closeTimeoutMS={200}
      style={{
        overlay: {
          transition: "opacity 200ms ease-in-out",
        },
        content: {
          transition: "all 200ms ease-in-out",
        },
      }}
    >
      <div className="flex justify-end">
        <button
          onClick={close}
          className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg mb-4 hover:cursor-pointer"
        >
          Close
        </button>
      </div>
      {children}
    </Modal>
  );
};

export default ModalComponent;