"use client";

import React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cx } from "../lib/utils";

const badgeVariants = tv({
	base: cx(
		"inline-flex items-center gap-x-1 whitespace-nowrap rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset",
	),
	variants: {
		variant: {
			default: ["bg-primary/10 text-primary ring-primary/30"],
			neutral: ["bg-muted text-muted-foreground ring-border"],
			success: [
				"bg-green-50 text-green-700 ring-green-600/30 dark:bg-green-400/10 dark:text-green-400 dark:ring-green-400/20",
			],
			error: [
				"bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20",
			],
			warning: [
				"bg-orange-50 text-orange-700 ring-orange-600/30 dark:bg-orange-400/10 dark:text-orange-400 dark:ring-orange-400/20",
			],
		},
	},
	defaultVariants: {
		variant: "default",
	},
});

interface OnboardingBadgeProps
	extends React.ComponentPropsWithoutRef<"span">,
		VariantProps<typeof badgeVariants> {}

const OnboardingBadge = React.forwardRef<HTMLSpanElement, OnboardingBadgeProps>(
	({ className, variant, ...props }, forwardedRef) => {
		return (
			<span
				ref={forwardedRef}
				className={cx(badgeVariants({ variant }), className)}
				{...props}
			/>
		);
	},
);

OnboardingBadge.displayName = "OnboardingBadge";

export { OnboardingBadge, badgeVariants, type OnboardingBadgeProps };