import type { ReactNode } from "react";
import { createPortal } from "react-dom";

export function Modal({
  children,
  description,
  isOpen,
  dismissable = false,
  onOpenChange,
  title,
  className,
}: {
  children?: ReactNode;
  className?: string;
  description?: string;
  dismissable?: boolean;
  isOpen: boolean;
  onOpenChange?: (isOpen: boolean) => void;
  title: string;
}) {
  if (!isOpen) {
    return null;
  }

  const content = (
    <div
      className="uhuru-modal fixed inset-0 z-[9999] flex items-center justify-center p-6"
      onPointerDown={(event) => {
        if (dismissable && event.target === event.currentTarget) {
          onOpenChange?.(false);
        }
      }}
    >
      <div className={`uhuru-modal__surface w-full max-w-[min(1100px,calc(100vw-2rem))] ${className ?? ""}`}>
        <div className="uhuru-modal__header px-5 py-4">
          <h3 className="m-0 text-xl">{title}</h3>
          {description ? <p className="uhuru-modal__description mt-2 mb-0 text-sm">{description}</p> : null}
        </div>
        <div className="uhuru-modal__body p-5">{children}</div>
      </div>
    </div>
  );

  if (typeof document === "undefined") {
    return content;
  }

  return createPortal(
    content,
    document.querySelector<HTMLElement>("[data-uhuru-root]") ?? document.body,
  );
}