import { cn } from "../../lib/cn";

export const Badge = ({
  children,
  tone = "neutral"
}: {
  children: React.ReactNode;
  tone?: "neutral" | "accent" | "success" | "warning";
}) => (
  <span
    className={cn(
      "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold",
      tone === "neutral" && "bg-white text-muted",
      tone === "accent" && "bg-accent/12 text-accent",
      tone === "success" && "bg-[#d7efe1] text-[#23684d]",
      tone === "warning" && "bg-[#f5e0c2] text-[#8f5b1f]"
    )}
  >
    {children}
  </span>
);