interface StatusBadgeProps {
  status: 'LIVE' | 'PRE' | 'RES' | 'SETTLED'
}

// StatusBadge is a low-level visual indicator for match states
export function StatusBadge({ status }: StatusBadgeProps) {
  const colorMap = {
    LIVE: 'text-emerald-400 animate-pulse',
    PRE: 'text-amber-500',
    RES: 'text-rose-500',
    SETTLED: 'text-slate-500',
  }

  const labelMap = {
    LIVE: '● LIVE',
    PRE: '○ PRE',
    RES: '◉ RES',
    SETTLED: '■ SETTLED',
  }

  return (
    <span
      className={`text-[9px] px-1 font-bold rounded-none select-none ${colorMap[status]}`}
    >
      {labelMap[status]}
    </span>
  )
}
