import { useEffect, useRef, type ReactNode } from "react";
export interface DialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  children: ReactNode;
  className?: string;
}
export function Dialog({
  open,
  onOpenChange,
  title,
  children,
  className = "",
}: DialogProps) {
  const ref = useRef<HTMLDialogElement>(null);
  useEffect(() => {
    const dialog = ref.current!;
    if (!open) {
      if (dialog.open) dialog.close();
      return;
    }
    const previous = document.activeElement;
    if (!dialog.open) dialog.showModal();
    return () => {
      if (dialog.open) dialog.close();
      if (previous instanceof HTMLElement && previous.isConnected)
        previous.focus();
    };
  }, [open]);
  return (
    <dialog
      ref={ref}
      className={`ynr-dialog ${className}`}
      aria-label={title}
      onCancel={(event) => {
        event.preventDefault();
        onOpenChange(false);
      }}
    >
      <div className="ynr-dialog-heading">
        <h2>{title}</h2>
        <button
          type="button"
          className="ynr-dialog-close"
          aria-label="Close dialog"
          onClick={() => onOpenChange(false)}
        >
          ×
        </button>
      </div>
      {children}
    </dialog>
  );
}