/**
 * <Badge> — etiqueta curta de estado ou contagem.
 *
 * Cantos rectos como o resto do sistema. As variantes de sucesso e erro usam
 * os mesmos tokens do estado do hardware (--online / --offline), para que
 * "publicado" e "painel online" leiam como a mesma cor em toda a plataforma.
 */

const VARIANTES_BADGE = {
  neutro:   'bg-secondary text-foreground',
  contorno: 'border border-border text-muted-foreground',
  primario: 'bg-[hsl(var(--primary)/0.15)] text-primary-texto',
  accent:   'bg-[hsl(var(--accent)/0.15)] text-accent',
  sucesso:  'bg-[hsl(var(--online)/0.15)] text-[hsl(var(--online))]',
  erro:     'bg-[hsl(var(--offline)/0.15)] text-perigo-texto',
};

function Badge({ variante = 'neutro', Icone, className = '', children }) {
  return (
    <span
      className={`inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-2 py-0.5 text-xs ${
        VARIANTES_BADGE[variante] || VARIANTES_BADGE.neutro
      } ${className}`}
    >
      {Icone && <Icone size={12} />}
      {children}
    </span>
  );
}