Badge

import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const badge = cva("inline-flex h-[22px] items-center gap-1.5 whitespace-nowrap rounded-full px-2 text-xs font-medium", {
  variants: {
    tone: {
      brand: "bg-primary-soft text-primary-soft-fg",
      neutral: "bg-surface-2 text-fg-muted",
      success: "bg-success-soft text-success-fg",
      warning: "bg-warning-soft text-warning-fg",
      danger: "bg-danger-soft text-danger-fg",
      info: "bg-info-soft text-info-fg",
      outline: "border border-border-strong text-fg-muted",
    },
  },
  defaultVariants: { tone: "brand" },
});

export function Badge({ tone, dot, className, children, ...props }:
  React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badge> & { dot?: boolean }) {
  return (
    <span className={cn(badge({ tone }), className)} {...props}>
      {dot && <span className="size-1.5 rounded-full bg-current" />}
      {children}
    </span>
  );
}