import { useEffect, useRef, type DialogHTMLAttributes, type ReactNode, type SyntheticEvent } from "react";

// окно: родной <dialog> держит фокус и закрывает фон; Esc — onClose, закрытие по фону — на стороне использующего.
// Остальные атрибуты <dialog> (onCancel, onClick, aria-labelledby …) проходят насквозь и могут переопределить поведение по
// умолчанию; нативное событие close — onNativeClose (имя onClose занято запросом закрытия).
type Rest = Omit<DialogHTMLAttributes<HTMLDialogElement>, "className" | "children" | "onClose" | "aria-label">;
export function Dialog({ label, onClose, onNativeClose, size = "md", className, children, ...rest }: {
  label: string; onClose(): void; onNativeClose?(e: SyntheticEvent<HTMLDialogElement>): void;
  size?: "sm" | "md" | "lg"; className?: string; children: ReactNode;
} & Rest) {
  const ref = useRef<HTMLDialogElement>(null);
  useEffect(() => { const d = ref.current; if (d && !d.open) d.showModal(); }, []);
  return (
    <dialog ref={ref} className={["ui-dialog", `ui-dialog--${size}`, className].filter(Boolean).join(" ")} aria-label={label}
      onCancel={(e) => { e.preventDefault(); onClose(); }} {...rest} onClose={onNativeClose}>
      {children}
    </dialog>
  );
}