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

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

const badgeVariants = cva(
  "smx-inline-flex smx-items-center smx-rounded-full smx-border smx-px-2.5 smx-py-0.5 smx-text-xs smx-font-semibold smx-transition-colors focus:smx-outline-none focus:smx-ring-2 focus:smx-ring-ring focus:smx-ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "smx-border-transparent smx-bg-primary smx-text-primary-foreground hover:smx-bg-primary/80",
        secondary:
          "smx-border-transparent smx-bg-secondary smx-text-secondary-foreground hover:smx-bg-secondary/80",
        destructive:
          "smx-border-transparent smx-bg-destructive smx-text-destructive-foreground hover:smx-bg-destructive/80",
        outline: "smx-text-foreground",
        success:
          "smx-border-transparent smx-bg-success smx-text-success-foreground hover:smx-bg-success/80",
        warning:
          "smx-border-transparent smx-bg-warning smx-text-warning-foreground hover:smx-bg-warning/80",
        info:
          "smx-border-transparent smx-bg-info smx-text-info-foreground hover:smx-bg-info/80",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

/**
 * Renders a badge element with styling determined by the selected variant.
 *
 * @param className - Additional CSS classes to merge with the computed badge classes
 * @param variant - Visual style variant to apply to the badge (e.g., "default", "secondary", "destructive", "outline")
 * @param props - Additional props spread onto the underlying div element
 * @returns The rendered badge div element
 */
function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }