Badge

import { cva, type VariantProps } from "class-variance-authority";
import { type ComponentProps } from "react";
import { Slot } from "radix-ui";
import { cn } from "../lib/cn";

/** Adapted from shadcn/ui Badge. Tones stay on MD3 roles. */

const badgeVariants = cva(
  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-[var(--md-sys-shape-corner-full)] border border-transparent px-2.5 py-0.5 text-[length:var(--md-sys-typescale-label-small-size)] font-medium whitespace-nowrap [&>svg]:size-3",
  {
    variants: {
      variant: {
        default: "bg-primary-container text-on-primary-container",
        secondary: "bg-secondary-container text-on-secondary-container",
        tertiary: "bg-tertiary-container text-on-tertiary-container",
        destructive: "bg-error-container text-on-error-container",
        outline: "border-outline text-on-surface bg-transparent",
        ghost: "bg-surface-variant text-on-surface-variant",
        inverse: "bg-inverse-surface text-inverse-on-surface",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
);

function Badge({
  className,
  variant = "default",
  asChild = false,
  ...props
}: ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot.Root : "span";
  return (
    <Comp
      data-slot="badge"
      data-variant={variant}
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  );
}

export { Badge, badgeVariants };