import { LEAD_STATUS_COLORS } from '../../utils/constants';

/**
 * Badge – small status/label pill component.
 *
 * Usage 1 (status badge): <Badge status="abandoned" />
 * Usage 2 (custom color):  <Badge color="indigo">Pro</Badge>
 */
export default function Badge({ children, color, status, size = 'sm', className = '' }) {
  // Auto-color based on lead status
  if (status && !color && !children) {
    const colorClass = LEAD_STATUS_COLORS[status] || 'bg-slate-100 text-slate-700';
    const sizeClass  = size === 'md' ? 'px-2.5 py-1 text-sm' : 'px-2 py-0.5 text-xs';
    return (
      <span className={`inline-flex items-center font-semibold rounded-full border border-transparent ${colorClass} ${sizeClass} ${className}`}>
        {status.charAt(0).toUpperCase() + status.slice(1)}
      </span>
    );
  }

  const colorMap = {
    indigo:  'bg-indigo-100 text-indigo-800 border-indigo-200',
    emerald: 'bg-emerald-100 text-emerald-800 border-emerald-200',
    amber:   'bg-amber-100 text-amber-800 border-amber-200',
    red:     'bg-red-100 text-red-800 border-red-200',
    blue:    'bg-blue-100 text-blue-800 border-blue-200',
    purple:  'bg-purple-100 text-purple-800 border-purple-200',
    slate:   'bg-slate-100 text-slate-700 border-slate-200',
    pink:    'bg-pink-100 text-pink-800 border-pink-200',
    orange:  'bg-orange-100 text-orange-800 border-orange-200',
    teal:    'bg-teal-100 text-teal-800 border-teal-200',
    green:   'bg-green-100 text-green-800 border-green-200',
  };

  const sizeMap = {
    sm: 'px-2 py-0.5 text-xs',
    md: 'px-2.5 py-1 text-sm',
  };

  return (
    <span className={`inline-flex items-center font-semibold rounded-full border ${colorMap[color] || colorMap.slate} ${sizeMap[size] || sizeMap.sm} ${className}`}>
      {children}
    </span>
  );
}