import { useModalStore } from "@/stores/useModalStore";
import { useEffect } from "react";
import { createPortal } from "react-dom";

export function ModalContainer() {
  const { modal, setModal } = useModalStore();

  useEffect(() => {
    const listener = (e: KeyboardEvent) => {
      if (e.key === "Escape") setModal(null);
    };
    document.addEventListener("keydown", listener);

    return () => {
      document.removeEventListener("keydown", listener);
    };
  }, [setModal]);

  const jsx = modal ? (
    <div className="fixed left-0 z-[20] w-full h-full flex justify-center items-start transition-opacity">
      <div className="absolute [backdrop-filter:blur(16px)] bg-[#0F101199] w-full h-full z-[1]" />
      {modal}
    </div>
  ) : null;

  return createPortal(jsx, document.body);
}