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

type Tone = 'neutral' | 'success' | 'warning' | 'danger' | 'accent';

const tones: Record<Tone, string> = {
  neutral: 'bg-ink-100 text-ink-700 ring-ink-200',
  success: 'bg-emerald-50 text-emerald-700 ring-emerald-200',
  warning: 'bg-amber-50 text-amber-700 ring-amber-200',
  danger:  'bg-red-50 text-red-700 ring-red-200',
  accent:  'bg-accent-50 text-accent-700 ring-accent-200',
};

export function Badge({
  tone = 'neutral',
  dot,
  className,
  title,
  children,
}: {
  tone?: Tone;
  dot?: boolean;
  className?: string;
  title?: string;
  children: React.ReactNode;
}) {
  return (
    <span
      title={title}
      className={cn(
        'inline-flex items-center gap-1.5 px-2 py-0.5 text-[11px] font-medium rounded-full ring-1 ring-inset',
        tones[tone],
        className,
      )}
    >
      {dot && <span className={cn('h-1.5 w-1.5 rounded-full', {
        'bg-ink-500': tone === 'neutral',
        'bg-emerald-500': tone === 'success',
        'bg-amber-500': tone === 'warning',
        'bg-red-500': tone === 'danger',
        'bg-accent-500': tone === 'accent',
      })} />}
      {children}
    </span>
  );
}
