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

// Opens the Docs panel scrolled to (and flashing) sectionId, instead of the user hunting for it in the Docs accordion (ticket 021).
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-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-soft bg-surface-2 text-xs leading-none text-text-muted hover:border-border-strong hover:text-text-secondary"
    >
      ?
    </button>
  )
}