'use client'

import EntityBadge from '@/components/common/EntityBadge'
import { usePostureGlossary } from '@/components/common/PostureGlossaryProvider'
import { resolvePostureTermId } from '@/data/postureGlossary'

export default function PostureBadge({
  label,
  tone,
  className,
}: {
  label: string
  tone?: 'neutral' | 'success' | 'warning' | 'info'
  className?: string
}) {
  const { openTerm } = usePostureGlossary()
  const termId = resolvePostureTermId(label)

  if (!termId) {
    return <EntityBadge label={label} tone={tone} className={className} />
  }

  return (
    <button
      type="button"
      onClick={() => openTerm(termId)}
      title="Open posture glossary"
      className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
    >
      <EntityBadge label={label} tone={tone} className={className} />
    </button>
  )
}