import { Slot } from "@radix-ui/react-slot"
import type * as React from "react"
import { badge, type BadgeVariants } from "./badge.css"

function Badge({
	className,
	variant,
	asChild = false,
	...props
}: React.ComponentProps<"span"> & BadgeVariants & { asChild?: boolean }) {
	const Comp = asChild ? Slot : "span"

	const combinedClassName = className
		? `${badge({ variant })} ${className}`
		: badge({ variant })

	return <Comp className={combinedClassName} data-slot="badge" {...props} />
}

export { Badge, badge as badgeVariants }