import React from 'react'

const TONE_CLASSES = {
  default: 'border-white/10 bg-white/[0.05] text-slate-200',
  slate: 'border-white/10 bg-white/[0.05] text-slate-300',
  sky: 'border-sky-300/20 bg-sky-400/10 text-sky-100',
  emerald: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100',
  amber: 'border-amber-300/20 bg-amber-400/10 text-amber-100',
  rose: 'border-rose-300/20 bg-rose-400/10 text-rose-100',
}

export default function WorldSuggestionReasonPills({ reasons = [] }) {
  if (!Array.isArray(reasons) || reasons.length === 0) {
    return null
  }

  return (
    <div className="mt-3 flex flex-wrap gap-2">
      {reasons.map((reason) => (
        <span
          key={`${reason.label}-${reason.tone || 'default'}`}
          className={`rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] ${TONE_CLASSES[reason.tone] || TONE_CLASSES.default}`}
        >
          {reason.label}
        </span>
      ))}
    </div>
  )
}