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 Time Tools</h2>
        </div>
        <button type="button" onClick={onClose} aria-label="Close help">
          ×
        </button>
      </div>
      <p>Work with dates, time zones and recurrences locally in the browser.</p>
      <p>
        All processing is performed in this browser. Imported data is treated as
        untrusted and bounded before parsing.
      </p>
    </dialog>
  );
}