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

export type BadgeTone = 'violet' | 'cyan' | 'amber' | 'lime' | 'danger' | 'neutral' | 'solid';

// Tinted fills with the "-soft" text colour keep labels above 4.5:1 on navy.
const tones: Record<BadgeTone, string> = {
  violet: 'border-violet/45 bg-violet/15 text-violet-soft',
  cyan: 'border-cyan/40 bg-cyan/10 text-cyan-soft',
  amber: 'border-amber/45 bg-amber/10 text-amber-soft',
  lime: 'border-lime/40 bg-lime/10 text-lime-soft',
  danger: 'border-danger/45 bg-danger/10 text-danger-soft',
  neutral: 'border-line-strong/70 bg-raised text-muted',
  solid: 'border-transparent bg-amber text-on-bright',
};

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  tone?: BadgeTone;
}

export function Badge({ tone = 'violet', className, ...rest }: BadgeProps) {
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-[0.12em] [&_svg]:size-3.5',
        tones[tone],
        className,
      )}
      {...rest}
    />
  );
}