import { ModalPanel } from './ModalPanel';

interface HelpPanelProps {
  open: boolean;
  onClose: () => void;
}

export function HelpPanel({ open, onClose }: HelpPanelProps) {
  if (!open) return null;
  return (
    <ModalPanel
      className="help-panel"
      labelledBy="help-title"
      onClose={onClose}
    >
      <header>
        <div>
          <p className="eyebrow">Toolbox guide</p>
          <h2 id="help-title">Choose and arrange your tools</h2>
        </div>
        <button
          className="close-button"
          type="button"
          aria-label="Close help"
          onClick={onClose}
        >
          ×
        </button>
      </header>
      <div className="help-steps">
        <p>
          <strong>Open:</strong> click anywhere on a tool tile that is not a
          control.
        </p>
        <p>
          <strong>Details:</strong> use the light bulb to review privacy,
          requirements, categories, tags, version, and source before opening.
        </p>
        <p>
          <strong>Filter:</strong> search, choose a category, or select a tag
          from a tool's information panel. Select the tag again to clear it.
        </p>
        <p>
          <strong>Arrange:</strong> pin frequently used tools into their own
          section, then drag the grip to reorder. The grip also supports
          keyboard dragging with Space, arrow keys, and Escape.
        </p>
      </div>
    </ModalPanel>
  );
}