import { useEffect, useRef } from "react";
export function HelpDialog({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  const r = useRef<HTMLDialogElement>(null);
  useEffect(() => {
    if (open && !r.current?.open) r.current?.showModal();
    else if (!open && r.current?.open) r.current.close();
  }, [open]);
  return (
    <dialog
      ref={r}
      onClose={onClose}
      onCancel={onClose}
      aria-label="About Flow Tools"
    >
      <button className="close" onClick={onClose}>
        ×
      </button>
      <h2>Flow Tools</h2>
      <p>
        Build bounded transformations from fixed primitives, inspect every
        stage, and export deterministic recipes or results.
      </p>
      <p>
        No stage runs JavaScript, accesses the network, mutates input files or
        hides conversion loss. Join expansion, rows, fields and recipe size are
        capped.
      </p>
    </dialog>
  );
}