import { cn } from "@/lib/utils";

export function Badge({ children, tone = "neutral" }: { children: React.ReactNode; tone?: "neutral" | "green" | "yellow" | "red" | "blue" }) {
  return (
    <span
      className={cn(
        "inline-flex h-6 items-center rounded-full border px-2 text-xs font-medium",
        tone === "neutral" && "bg-muted text-muted-foreground",
        tone === "green" && "border-emerald-500/20 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
        tone === "yellow" && "border-amber-500/20 bg-amber-500/10 text-amber-700 dark:text-amber-300",
        tone === "red" && "border-red-500/20 bg-red-500/10 text-red-600 dark:text-red-400",
        tone === "blue" && "border-blue-500/20 bg-blue-500/10 text-blue-600 dark:text-blue-400",
      )}
    >
      {children}
    </span>
  );
}