import type { ReactNode } from 'react';

type BadgeColor = 'green' | 'amber' | 'red' | 'purple' | 'cyan' | 'orange' | 'neutral' | 'accent';

interface BadgeProps {
  color?: BadgeColor;
  dot?: boolean;
  children: ReactNode;
  className?: string;
}

const COLOR_CLASSES: Record<BadgeColor, string> = {
  green: 'bg-green/10 text-green border-green/25',
  amber: 'bg-amber/10 text-amber border-amber/25',
  red: 'bg-red/10 text-red border-red/25',
  purple: 'bg-purple/10 text-purple border-purple/25',
  cyan: 'bg-cyan/10 text-cyan border-cyan/25',
  orange: 'bg-orange/10 text-orange border-orange/25',
  neutral: 'bg-surface1 text-secondary border-border',
  accent: 'bg-accent/10 text-accent border-accent/25',
};

const DOT_COLORS: Record<BadgeColor, string> = {
  green: 'bg-green',
  amber: 'bg-amber',
  red: 'bg-red',
  purple: 'bg-purple',
  cyan: 'bg-cyan',
  orange: 'bg-orange',
  neutral: 'bg-muted',
  accent: 'bg-accent',
};

/**
 * Ethos badge — semantic status indicator.
 * Only uses colors from the Ethos semantic set. Never decorative.
 */
export function Badge({ color = 'neutral', dot = false, children, className = '' }: BadgeProps) {
  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-medium ${COLOR_CLASSES[color]} ${className}`}
    >
      {dot && <span className={`w-1.5 h-1.5 rounded-full ${DOT_COLORS[color]}`} />}
      {children}
    </span>
  );
}
