import React from 'react'

const TONES = {
  1: 'border-slate-500/30 bg-slate-500/10 text-slate-200',
  2: 'border-sky-400/35 bg-sky-500/10 text-sky-200',
  3: 'border-emerald-400/35 bg-emerald-500/10 text-emerald-200',
  4: 'border-fuchsia-400/35 bg-fuchsia-500/10 text-fuchsia-200',
  5: 'border-amber-400/35 bg-amber-500/10 text-amber-100',
  6: 'border-rose-400/35 bg-rose-500/10 text-rose-100',
  7: 'border-violet-400/35 bg-violet-500/10 text-violet-100',
}

function cx(...parts) {
  return parts.filter(Boolean).join(' ')
}

export default function LevelBadge({ level = 1, rank = 'Newbie', compact = false, className = '' }) {
  const numericLevel = Number(level || 1)
  const tone = TONES[numericLevel] || TONES[1]

  return (
    <span
      className={cx(
        'inline-flex items-center gap-1 rounded-full border px-2.5 py-1 font-semibold tracking-[0.08em]',
        compact ? 'text-[10px] uppercase' : 'text-[11px] uppercase',
        tone,
        className,
      )}
    >
      <span>LVL {numericLevel}</span>
      <span className="text-current/75">{rank}</span>
    </span>
  )
}