Badge

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

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

/* =============================================================================
 * Badge — Motoko UI
 *
 * Compact status / label pill with Motoko surface tokens.
 *
 *   <Badge>Default</Badge>
 *   <Badge variant="success">Live</Badge>
 * ============================================================================= */

const badgeVariants = cva(
  [
    "inline-flex items-center justify-center gap-1 whitespace-nowrap",
    "rounded-full px-2.5 py-0.5 text-xs font-semibold",
    "transition-colors duration-200 ease-[cubic-bezier(0.2,0,0,1)]",
    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3",
  ].join(" "),
  {
    variants: {
      variant: {
        default: "bg-b-surface1 text-t-primary",
        secondary: "bg-s-subtle text-t-secondary",
        success: "bg-primary-02/10 text-primary-02",
        warning: "bg-primary-05/10 text-primary-05",
        destructive: "bg-destructive/10 text-destructive",
        outline: "border border-s-stroke2 bg-transparent text-t-secondary",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}

export type BadgeVariantProps = VariantProps<typeof badgeVariants>

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <span
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }