import useModalStore from "../stores/useModalStore";
import CloseIcon from "./icons/CloseIcon";

function ModalContainer() {
  const [modal, setModal] = useModalStore((state) => [
    state.modal,
    state.setModal,
  ]);

  if (modal) {
    return (
      <div
        // onClick={() => setModal(null)}
        className={`min-h-screen p-8 absolute top-0 left-0 w-full flex justify-center items-center bg-black bg-opacity-30 overflow-auto transition-opacity`}
      >
        <div onClick={(e) => e.stopPropagation()} className="cursor-default">
          {modal}
        </div>

        <button onClick={() => setModal(null)} className="absolute top-4 right-4">
          <CloseIcon />
        </button>
      </div>
    );
  }
}

export default ModalContainer;