import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

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

const badgeVariants = cva(
  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-3 py-0.5 text-xs font-medium uppercase tracking-wide whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
        secondary:
          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
        destructive:
          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
        outline:
          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
        blue:
          "border-blue-200 bg-blue-100 text-blue-700 [a]:hover:bg-blue-200 dark:border-blue-800/60 dark:bg-blue-950 dark:text-blue-300 dark:[a]:hover:bg-blue-900",
        green:
          "border-emerald-200 bg-emerald-100 text-emerald-700 [a]:hover:bg-emerald-200 dark:border-emerald-800/60 dark:bg-emerald-950 dark:text-emerald-300 dark:[a]:hover:bg-emerald-900",
        sky:
          "border-sky-200 bg-sky-100 text-sky-700 [a]:hover:bg-sky-200 dark:border-cyan-800/60 dark:bg-cyan-950 dark:text-sky-300 dark:[a]:hover:bg-cyan-900",
        teal:
          "border-teal-200 bg-teal-100 text-teal-700 [a]:hover:bg-teal-200 dark:border-teal-800/60 dark:bg-teal-950 dark:text-teal-300 dark:[a]:hover:bg-teal-900",
        purple:
          "border-purple-200 bg-purple-100 text-purple-700 [a]:hover:bg-purple-200 dark:border-purple-800/60 dark:bg-purple-950 dark:text-purple-300 dark:[a]:hover:bg-purple-900",
        indigo:
          "border-indigo-200 bg-indigo-100 text-indigo-700 [a]:hover:bg-indigo-200 dark:border-indigo-800/60 dark:bg-indigo-950 dark:text-indigo-300 dark:[a]:hover:bg-indigo-900",
        red:
          "border-red-200 bg-red-100 text-red-700 [a]:hover:bg-red-200 dark:border-red-800/60 dark:bg-red-950 dark:text-red-300 dark:[a]:hover:bg-red-900",
        orange:
          "border-orange-200 bg-orange-100 text-orange-700 [a]:hover:bg-orange-200 dark:border-orange-800/60 dark:bg-orange-950 dark:text-orange-300 dark:[a]:hover:bg-orange-900",
        yellow:
          "border-amber-200 bg-amber-100 text-amber-700 [a]:hover:bg-amber-200 dark:border-amber-800/60 dark:bg-amber-950 dark:text-amber-300 dark:[a]:hover:bg-amber-900",
        lime:
          "border-lime-200 bg-lime-100 text-lime-700 [a]:hover:bg-lime-200 dark:border-lime-800/60 dark:bg-lime-950 dark:text-lime-300 dark:[a]:hover:bg-lime-900",
        pink:
          "border-pink-200 bg-pink-100 text-pink-700 [a]:hover:bg-pink-200 dark:border-pink-800/60 dark:bg-pink-950 dark:text-pink-300 dark:[a]:hover:bg-pink-900",
        gray:
          "border-gray-200 bg-gray-100 text-gray-600 [a]:hover:bg-gray-200 dark:border-gray-700/60 dark:bg-gray-800/50 dark:text-gray-400 dark:[a]:hover:bg-gray-800",
        ghost:
          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
        link: "text-primary underline-offset-4 hover:underline",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Badge({
  className,
  variant = "default",
  asChild = false,
  ...props
}: React.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 }