import * as React from "react"
import { cva } from "class-variance-authority";

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

/**
 * Badge — a static label. For anything that communicates lifecycle or health,
 * use `StatusBadge` from the design system instead: it maps domain states onto
 * these tones so the same status never renders two different colours.
 */
const badgeVariants = cva(
  "inline-flex items-center gap-1 border font-semibold whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "border-transparent bg-krow-blue text-white",
        soft: "border-transparent bg-krow-blue-tint text-krow-blue",
        accent: "border-transparent bg-krow-yellow text-krow-blue",
        navy: "border-transparent bg-krow-navy text-white",
        success: "border-transparent bg-success-muted text-success",
        warning: "border-transparent bg-warning-muted text-warning",
        destructive: "border-transparent bg-destructive-muted text-destructive",
        info: "border-transparent bg-info-muted text-info",
        neutral: "border-transparent bg-neutral-muted text-ink-3",
        outline: "border-border bg-transparent text-ink-2",
      },
      size: {
        sm: "h-[18px] px-1.5 text-[10px]",
        default: "h-5 px-2 text-[11px]",
        lg: "h-6 px-2.5 text-caption",
      },
      shape: {
        pill: "rounded-full",
        rounded: "rounded-md",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
      shape: "pill",
    },
  }
)

/** @type {React.ForwardRefExoticComponent<any>} */
const Badge = React.forwardRef(({ className, variant, size, shape, ...props }, ref) => (
  <div ref={ref} className={cn(badgeVariants({ variant, size, shape }), className)} {...props} />
))
Badge.displayName = "Badge"

export { Badge, badgeVariants }