import { useDocsNav } from '../lib/docsNav'

/**
 * A small "?" affordance that opens the Docs panel scrolled to (and
 * flashing) a specific section (ticket 021), instead of the user having to
 * find it themselves in the Docs accordion.
 */
export function HelpIcon({ sectionId, label }: { sectionId: string; label?: string }) {
  const { openSection } = useDocsNav()
  return (
    <button
      type="button"
      onClick={() => openSection(sectionId)}
      title="Open docs"
      aria-label={label ?? 'Open docs for this section'}
      className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border-soft text-[10px] leading-none text-text-faint hover:border-border-strong hover:text-text-secondary"
    >
      ?
    </button>
  )
}