"use client";

import { useState, type ReactNode } from "react";
import { Modal } from "./modal";

/** A small "?" affordance that opens its help content in a popup, keeping settings pages
 *  uncluttered. */
export function HelpButton({ title, children }: { title: string; children: ReactNode }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button
        type="button"
        className="help-btn"
        aria-label={`Help: ${title}`}
        onClick={() => setOpen(true)}
      >
        ?
      </button>
      <Modal open={open} onClose={() => setOpen(false)} title={title}>
        <div className="help-body">{children}</div>
      </Modal>
    </>
  );
}