import React from 'react'

function toneClasses(tone, isPrimary) {
  const styles = {
    emerald: 'border-emerald-300/20 bg-emerald-400/12 text-emerald-100',
    violet: 'border-violet-300/20 bg-violet-400/12 text-violet-100',
    amber: 'border-amber-300/20 bg-amber-400/12 text-amber-100',
    rose: 'border-rose-300/20 bg-rose-400/12 text-rose-100',
    sky: 'border-sky-300/20 bg-sky-400/12 text-sky-100',
    slate: 'border-slate-300/15 bg-slate-300/10 text-slate-200',
  }

  const base = styles[tone] || styles.sky
  return `${base} ${isPrimary ? 'shadow-[0_0_22px_rgba(255,255,255,0.05)]' : ''}`.trim()
}

export default function ProfileWorldRecognitionBadge({ recognition, isPrimary = false }) {
  if (!recognition) {
    return null
  }

  return (
    <span className={`inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] ${toneClasses(recognition.tone, isPrimary)}`}>
      <span className="h-1.5 w-1.5 rounded-full bg-current opacity-80" />
      {recognition.label}
    </span>
  )
}