// components/ui/Badge.tsx
// Small status pill. Server-safe. Used for raffle status, "confirmado", etc.
// Status is conveyed by TEXT, never color alone (WCAG 2.1 AA).

import * as React from "react";

type Tone = "primary" | "neutral" | "blue";

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  tone?: Tone;
}

const tones: Record<Tone, string> = {
  primary: "bg-primary text-on-primary",
  neutral: "bg-track text-ink-strong",
  blue: "bg-steelblue text-on-primary",
};

export function Badge({
  tone = "neutral",
  className = "",
  children,
  ...rest
}: BadgeProps) {
  const cls = [
    "inline-flex items-center rounded-full px-3 py-1",
    "font-body text-caption font-bold uppercase tracking-wide",
    tones[tone],
    className,
  ]
    .filter(Boolean)
    .join(" ");
  return (
    <span className={cls} {...rest}>
      {children}
    </span>
  );
}