import type { BadgeColorName } from "@/theme/accents";

const COLOR_CLASSES: Record<string, string> = {
  green:   "bg-green-500/10 text-green-400",
  blue:    "bg-blue-500/10 text-blue-400",
  purple:  "bg-purple-500/10 text-purple-400",
  yellow:  "bg-yellow-500/10 text-yellow-400",
  orange:  "bg-orange-500/10 text-orange-400",
  red:     "bg-red-500/10 text-red-400",
  cyan:    "bg-cyan-500/10 text-cyan-400",
  pink:    "bg-pink-500/10 text-pink-400",
  indigo:  "bg-indigo-500/10 text-indigo-400",
  default: "bg-white/5 text-[var(--z-muted)]",
};

interface BadgeProps {
  text: string;
  color?: BadgeColorName;
  onClick?: () => void;
}

export function Badge({ text, color = "default", onClick }: BadgeProps) {
  const cls = COLOR_CLASSES[color] || COLOR_CLASSES.default;
  return (
    <span
      class={`font-mono text-[var(--z-font-xs)] px-2 py-0.5 rounded-full inline-block ${cls} ${onClick ? "cursor-pointer hover:opacity-80" : ""}`}
      onClick={onClick}
    >
      {text}
    </span>
  );
}
