import { useEffect, type ReactNode } from "react";
import { createPortal } from "react-dom";
import { cn } from "../../lib/utils";
import { Button } from "./Button";

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  children: ReactNode;
  className?: string;
  hideHeader?: boolean;
  noPadding?: boolean;
}

export function Modal({ isOpen, onClose, title, children, className, hideHeader, noPadding }: ModalProps) {
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    if (isOpen) {
      document.body.style.overflow = "hidden";
      window.addEventListener("keydown", handleEscape);
    }
    return () => {
      document.body.style.overflow = "unset";
      window.removeEventListener("keydown", handleEscape);
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return createPortal(
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
      <div
        className={cn(
          "bg-zinc-950 border border-zinc-800 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col animate-in zoom-in-95 duration-200",
          className
        )}
      >
        {!hideHeader && (
          <div className="flex items-center justify-between p-6 border-b border-zinc-800">
            <h2 className="text-xl font-bold text-white">{title}</h2>
            <Button variant="ghost" size="icon" onClick={onClose} className="rounded-full">
              <span className="material-symbols-outlined">close</span>
            </Button>
          </div>
        )}
        <div className={cn("flex-1 overflow-y-auto", !noPadding && "p-6")}>
          {children}
        </div>
      </div>
    </div>,
    document.body
  );
}
