import React from 'react'

const LABELS = {
  free: 'Free',
  creator: 'Creator',
  pro: 'Pro',
  admin: 'Admin',
}

const CLASSES = {
  free: 'border-white/12 bg-white/[0.06] text-slate-200',
  creator: 'border-amber-300/25 bg-amber-300/12 text-amber-100',
  pro: 'border-sky-300/25 bg-sky-300/12 text-sky-100',
  admin: 'border-emerald-300/25 bg-emerald-300/12 text-emerald-100',
}

export default function AccessBadge({ tier = 'free', className = '' }) {
  const normalizedTier = typeof tier === 'string' ? tier.toLowerCase() : 'free'
  const label = LABELS[normalizedTier] || 'Free'
  const tone = CLASSES[normalizedTier] || CLASSES.free

  return (
    <span className={`inline-flex items-center rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] ${tone} ${className}`.trim()}>
      {label}
    </span>
  )
}