Badge

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

const badgeVariants = cva(
  "group/badge inline-flex h-6 w-fit shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-full border border-transparent px-2.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:ring-3 focus-visible:ring-ring/40 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&>svg]:pointer-events-none [&>svg]:size-3!",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/85",
        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
        outline: "border-input text-foreground [a]:hover:bg-foreground/5",
        brand: "bg-brand/12 text-brand [a]:hover:bg-brand/18",
        glass:
          "bg-white/55 text-ink backdrop-blur-md dark:bg-white/10 dark:text-night-text",
        destructive: "bg-destructive/10 text-destructive [a]:hover:bg-destructive/16",
        // Landscape tones: categorical labels for topics, channels and sources.
        fjord: "bg-fjord/12 text-fjord dark:bg-fjord/30 dark:text-[#9db7dc]",
        oasis: "bg-oasis/12 text-oasis dark:bg-oasis/30 dark:text-[#a8cf9f]",
        sabkha: "bg-sabkha/12 text-sabkha dark:bg-sabkha/30 dark:text-[#aeabe6]",
        sand: "bg-sand text-ink-2 dark:bg-sand/15 dark:text-sand",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Badge({
  className,
  variant = "default",
  render,
  ...props
}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
  return useRender({
    defaultTagName: "span",
    props: mergeProps<"span">(
      {
        className: cn(badgeVariants({ variant }), className),
      },
      props
    ),
    render,
    state: {
      slot: "badge",
      variant,
    },
  })
}

export { Badge, badgeVariants }