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

// ---------------------------------------------------------------------------
// The first shadcn thing to land, and deliberately the smallest one.
//
// It is a CLASS HELPER, not a component: `badgeVariants({variant})` returns a
// string, so a <Link> on a zero-client-JS page can wear it without becoming a
// client component. /browse and /browse/decisions are server-rendered with
// their filters as plain links, and a Radix component would quietly end that.
//
// The variants name PALETTE MEANINGS rather than shadcn's defaults, because the
// palette's rule is that colour means something: `on` is the interaction colour
// (the only one), and blocking/open/info are the three severities the decisions
// inbox already speaks in. There is no `primary`/`secondary` pair here because
// this app has no such distinction to make.
// ---------------------------------------------------------------------------

export const badgeVariants = cva(
  "inline-flex items-center rounded border px-1.5 py-0.5 font-mono text-[11px] transition-colors",
  {
    variants: {
      variant: {
        neutral: "border-border text-muted-foreground hover:text-foreground",
        on: "border-primary text-primary",
        blocking: "border-destructive text-destructive",
        open: "border-[var(--color-dirty)] text-[var(--color-dirty)]",
        info: "border-border text-muted-foreground",
        meter: "border-[var(--color-meter)] text-[var(--color-meter)]",
      },
      size: {
        sm: "px-1.5 py-0.5 text-[10px] uppercase tracking-wider",
        md: "",
      },
    },
    defaultVariants: { variant: "neutral", size: "md" },
  },
);

export type BadgeVariants = VariantProps<typeof badgeVariants>;

export function Badge({
  className,
  variant,
  size,
  ...props
}: React.ComponentProps<"span"> & BadgeVariants) {
  return <span className={cn(badgeVariants({ variant, size }), className)} {...props} />;
}