interface BadgeProps {
  children: React.ReactNode;
  variant?: "brand" | "ink" | "muted" | "cream";
  className?: string;
}

export function Badge({
  children,
  variant = "brand",
  className = "",
}: BadgeProps) {
  const variants = {
    brand: "bg-tag-bg text-brand",
    ink: "bg-ink text-white",
    muted: "bg-border text-text-2",
    cream: "bg-cream text-ink",
  };

  return (
    <span
      className={`inline-block px-2 py-0.5 text-xs font-semibold uppercase tracking-wide rounded ${variants[variant]} ${className}`}
    >
      {children}
    </span>
  );
}