Badge

import * as React from "react"

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

const variants = {
  neutral: "bg-secondary text-secondary-foreground",
  outline: "border border-border text-foreground",
  solid: "bg-primary text-primary-foreground",
  destructive: "bg-destructive/10 text-destructive",
} as const

export type BadgeProps = React.ComponentProps<"span"> & {
  variant?: keyof typeof variants
  /** Shows a status dot before the label. Color it with `dotClassName`. */
  dot?: boolean
  /** Adds a slow ping to the dot, for live or in-progress states. */
  pulse?: boolean
  dotClassName?: string
}

function Badge({
  variant = "neutral",
  dot = false,
  pulse = false,
  dotClassName,
  className,
  children,
  ...props
}: BadgeProps) {
  return (
    <span
      data-slot="badge"
      className={cn(
        "inline-flex h-[22px] max-w-full items-center gap-1.5 rounded-sm px-2 text-xs font-medium whitespace-nowrap",
        "[&_svg]:size-3 [&_svg]:shrink-0",
        variants[variant],
        className
      )}
      {...props}
    >
      {dot && (
        <span aria-hidden="true" className="relative flex size-1.5 shrink-0">
          {pulse && (
            <span
              className={cn(
                "absolute inline-flex size-full animate-ping rounded-full bg-current opacity-60 motion-reduce:hidden",
                dotClassName
              )}
            />
          )}
          <span className={cn("relative size-1.5 rounded-full bg-current", dotClassName)} />
        </span>
      )}
      <span className="truncate">{children}</span>
    </span>
  )
}

export { Badge }