import { cn } from '@/lib/cn';

export function Badge({
  children,
  tone = 'muted',
  className,
  title,
}: {
  children: React.ReactNode;
  tone?: 'muted' | 'ok' | 'warn' | 'danger' | 'accent';
  className?: string;
  title?: string;
}) {
  return (
    <span
      title={title}
      className={cn(
        'inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-semibold whitespace-nowrap',
        tone === 'muted' && 'bg-surface-2 text-muted',
        tone === 'ok' && 'bg-ok-soft text-ok',
        tone === 'warn' && 'bg-warn-soft text-warn',
        tone === 'danger' && 'bg-danger-soft text-danger',
        tone === 'accent' && 'bg-accent-soft text-accent',
        className,
      )}
    >
      {children}
    </span>
  );
}