import { cn } from "@/utils/class-merge";
import { FunctionComponent } from "preact";
import { Dispatch, StateUpdater, useEffect } from "preact/hooks";

interface ModalWindowProps {
  isOpen?: boolean;
  setIsOpen?: Dispatch<StateUpdater<boolean>>;
  onClose?: () => void;
  className?: string;
  zIndex?: number;
}
const ModalWindow: FunctionComponent<ModalWindowProps> = ({
  isOpen,
  children,
  setIsOpen,
  onClose,
  className = "",
  zIndex,
}) => {
  useEffect(() => {
    if (isOpen) return;
    if (onClose) onClose();
  }, [isOpen]);
  return (
    isOpen && (
      <div
        onClick={(e) => {
          e.stopPropagation();
          if (setIsOpen) setIsOpen(false);
        }}
        class={cn(
          "fixed top-0 left-0 z-50 flex h-screen w-screen cursor-pointer flex-col items-center justify-center bg-black/50"
        )}
        style={{ zIndex: zIndex }}
      >
        <div
          class={cn(
            "flex h-[40rem] w-[95%] cursor-auto flex-col items-center justify-start rounded-[4rem] bg-white px-8 py-12 md:me-[20rem] md:h-[20rem] md:w-[65%] md:px-16",
            className
          )}
          onClick={(e) => e.stopPropagation()}
        >
          {children}
        </div>
      </div>
    )
  );
};

export default ModalWindow;