Badge

import { cva } from "class-variance-authority";
import type { ReactNode } from "react";

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

export const badgeVariants = cva(
  "inline-flex shrink-0 items-center whitespace-nowrap rounded-full font-medium tabular-nums",
  {
    compoundVariants: [
      {
        className: "bg-badge-amber-subtle text-badge-amber-subtle-foreground",
        contrast: "low",
        variant: "amber",
      },
      {
        className: "bg-badge-blue-subtle text-badge-blue-subtle-foreground",
        contrast: "low",
        variant: "blue",
      },
      {
        className: "bg-badge-gray-subtle text-badge-gray-subtle-foreground",
        contrast: "low",
        variant: "gray",
      },
      {
        className: "bg-badge-green-subtle text-badge-green-subtle-foreground",
        contrast: "low",
        variant: "green",
      },
      {
        className: "bg-badge-pink-subtle text-badge-pink-subtle-foreground",
        contrast: "low",
        variant: "pink",
      },
      {
        className: "bg-badge-purple-subtle text-badge-purple-subtle-foreground",
        contrast: "low",
        variant: "purple",
      },
      {
        className: "bg-badge-red-subtle text-badge-red-subtle-foreground",
        contrast: "low",
        variant: "red",
      },
      {
        className: "bg-badge-teal-subtle text-badge-teal-subtle-foreground",
        contrast: "low",
        variant: "teal",
      },
    ],
    defaultVariants: {
      size: "md",
      variant: "gray",
    },
    variants: {
      contrast: {
        low: "",
      },
      size: {
        lg: "h-8 gap-1.5 px-3 text-sm [&_svg]:size-4",
        md: "h-6 gap-1 px-2.5 text-xs [&_svg]:size-3.5",
        sm: "h-5 gap-1 px-2 text-[0.6875rem] [&_svg]:size-3",
      },
      variant: {
        amber: "bg-badge-amber text-black",
        blue: "bg-badge-blue text-white",
        gray: "bg-badge-gray text-white",
        green: "bg-badge-green text-white",
        inverted: "bg-gray-1000 text-background-100",
        pink: "bg-badge-pink text-white",
        purple: "bg-badge-purple text-white",
        red: "bg-badge-red text-white",
        teal: "bg-badge-teal text-white",
        verno: "bg-linear-to-r from-[#0a5dab] via-[#124276] to-[#c25329] text-white",
      },
    },
  },
);

interface BadgeProps {
  readonly children: ReactNode;
  readonly className?: string;
  readonly contrast?: "low";
  readonly icon?: ReactNode;
  readonly size?: "sm" | "md" | "lg";
  readonly variant?:
    | "gray"
    | "blue"
    | "purple"
    | "amber"
    | "red"
    | "pink"
    | "green"
    | "teal"
    | "inverted"
    | "verno";
}

export const Badge = ({
  children,
  className,
  contrast,
  icon,
  size = "md",
  variant = "gray",
}: BadgeProps) => (
  <span className={cn(badgeVariants({ contrast, size, variant }), className)}>
    {icon ? (
      <span aria-hidden="true" className="inline-flex shrink-0 items-center justify-center">
        {icon}
      </span>
    ) : null}
    {children}
  </span>
);