import type { HTMLAttributes } from 'react';
import { cn } from '@/lib/cn';

type Tone = 'neutral' | 'accent' | 'live' | 'gold' | 'muted';

const tones: Record<Tone, string> = {
  neutral: 'bg-elevated text-ink-soft border-line',
  accent: 'bg-accent-glow text-accent border-accent-deep/40',
  live: 'bg-live/15 text-live border-live/40',
  gold: 'bg-gold/15 text-gold border-gold/40',
  muted: 'bg-transparent text-muted border-line',
};

export function Badge({
  className,
  tone = 'neutral',
  ...props
}: HTMLAttributes<HTMLSpanElement> & { tone?: Tone }) {
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide',
        tones[tone],
        className,
      )}
      {...props}
    />
  );
}
