"use client"

import type { IBadgeProps } from "./Badge.d"
import type { JSX } from "react"

import { Badge as RadixBadge } from "@radix-ui/themes"
import { forwardRef } from "react"

const variantMap = {
	primary: "plum",
	secondary: "gray",
	success: "green",
	danger: "red",
	warning: "yellow",
	info: "blue",
} as const

export const Badge = forwardRef<HTMLSpanElement, IBadgeProps>(
	({ variant = "primary", children, ...props }, ref): JSX.Element => (
		<RadixBadge ref={ref} color={variantMap[variant]} {...props}>
			{children}
		</RadixBadge>
	),
)

Badge.displayName = "Badge"
