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

type Props = { children: React.ReactNode; color?: 'slate' | 'green' | 'red' | 'blue' | 'indigo'; className?: string; variant?: 'solid' | 'soft' };

const colorMap = {
  solid: {
    slate: 'bg-slate-500 text-white',
    green: 'bg-green-500 text-white',
    red: 'bg-red-500 text-white',
    blue: 'bg-blue-500 text-white',
    indigo: 'bg-indigo-500 text-white',
  },
  soft: {
    slate: 'bg-slate-50 text-slate-700 border border-slate-200/60',
    green: 'bg-green-50 text-green-700 border border-green-200/60',
    red: 'bg-red-50 text-red-700 border border-red-200/60',
    blue: 'bg-blue-50 text-blue-700 border border-blue-200/60',
    indigo: 'bg-indigo-50 text-indigo-700 border border-indigo-200/60',
  },
};

export const Badge = ({ children, color = 'indigo', variant = 'soft', className }: Props) => (
  <span className={cn('inline-flex items-center px-2.5 py-1 text-xs rounded-full font-semibold transition-colors', colorMap[variant][color], className)}>
    {children}
  </span>
);





