import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";

import { cva, type VariantProps } from "class-variance-authority";

import React from "react";

import { cn } from "../../lib/utils";

const badgeVariants = cva(

"stack-scope inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",

{

variants: {

variant: {

default:

"border-transparent bg-primary text-primary-foreground shadow",

secondary:

"border-transparent bg-secondary text-secondary-foreground",

destructive:

"border-transparent bg-destructive text-destructive-foreground shadow",

outline: "text-foreground",

},

},

defaultVariants: {

variant: "default",

},

}

);

export type BadgeProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;

const Badge = forwardRefIfNeeded<HTMLDivElement, BadgeProps>(({ className, variant, ...props }, ref) => {

return (

<div ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />

);

});

Badge.displayName = "Badge";

export { Badge, badgeVariants };