import { useEffect, useRef } from "react";

export function HelpDialog({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  const dialog = useRef<HTMLDialogElement>(null);
  useEffect(() => {
    const node = dialog.current;
    if (!node) return;
    if (open && !node.open) node.showModal();
    if (!open && node.open) node.close();
  }, [open]);
  return (
    <dialog
      ref={dialog}
      className="help-dialog"
      onClose={onClose}
      onCancel={onClose}
      aria-labelledby="help-title"
    >
      <div className="dialog-heading">
        <div>
          <p className="eyebrow">Local-first help</p>
          <h2 id="help-title">About Random Tools</h2>
        </div>
        <button type="button" onClick={onClose} aria-label="Close help">
          ×
        </button>
      </div>
      <p>
        Generate secure or reproducible random values locally in the browser.
      </p>
      <p>
        Local WebCrypto and seeded generation stay in this browser. RANDOM.ORG
        is contacted only from its separate workspace after explicit consent;
        local sources never fall back to it. Inputs and responses are bounded.
      </p>
    </dialog>
  );
}