import React from 'react'

function toneClasses(tone) {
  switch (tone) {
    case 'featured':
      return 'border-amber-300/30 bg-amber-400/12 text-amber-50 hover:border-amber-300/45 hover:bg-amber-400/18'
    case 'community':
      return 'border-sky-300/25 bg-sky-300/10 text-sky-100 hover:border-sky-300/40 hover:bg-sky-300/15'
    case 'curated':
      return 'border-emerald-300/25 bg-emerald-400/10 text-emerald-100 hover:border-emerald-300/40 hover:bg-emerald-400/15'
    case 'emerald':
      return 'border-emerald-300/25 bg-emerald-400/10 text-emerald-100 hover:border-emerald-300/40 hover:bg-emerald-400/15'
    case 'amber':
      return 'border-amber-300/30 bg-amber-400/12 text-amber-50 hover:border-amber-300/45 hover:bg-amber-400/18'
    case 'violet':
      return 'border-violet-300/25 bg-violet-400/10 text-violet-100 hover:border-violet-300/40 hover:bg-violet-400/15'
    case 'rose':
      return 'border-rose-300/25 bg-rose-400/10 text-rose-100 hover:border-rose-300/40 hover:bg-rose-400/15'
    case 'sky':
      return 'border-sky-300/25 bg-sky-300/10 text-sky-100 hover:border-sky-300/40 hover:bg-sky-300/15'
    default:
      return 'border-white/10 bg-white/[0.04] text-white hover:border-white/20 hover:bg-white/[0.07]'
  }
}

export default function WorldParticipationBadge({ items = [] }) {
  const badges = Array.isArray(items) ? items : []

  if (badges.length === 0) {
    return null
  }

  return (
    <div className="mt-4 flex flex-wrap items-center gap-2.5">
      <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">World participation</span>
      {badges.map((item) => {
        const label = item?.badge_label || item?.world_title || 'World participation'
        const badgeClassName = `inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium transition ${toneClasses(item?.tone)}`

        if (item?.world_url) {
          return (
            <a key={`${item.world_id}-${item.status || item.tone || 'world'}`} href={item.world_url} className={badgeClassName}>
              <i className="fa-solid fa-globe text-[11px]" />
              <span>{label}</span>
            </a>
          )
        }

        return (
          <span key={`${item.world_id}-${item.status || item.tone || 'world'}`} className={badgeClassName}>
            <i className="fa-solid fa-globe text-[11px]" />
            <span>{label}</span>
          </span>
        )
      })}
    </div>
  )
}