import type { HTMLAttributes } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

/**
 * 徽章变体，对应 DESIGN.md 的 badge-* 组件：
 * - tag      → badge-tag（文章标签，蓝色 + 半透明底）
 * - type     → badge-type（代码风格的类型标记）
 * - discount → badge-discount（品牌绿强调）
 * - required → badge-required（错误红，大写微标签）
 * - neutral  → 中性灰，用于日期 / 阅读时长等元信息
 */
export const badgeVariants = cva(
	"inline-flex items-center gap-[4px] whitespace-nowrap rounded-sm leading-none",
	{
		variants: {
			variant: {
				tag: "bg-brand-tag/15 text-brand-tag text-caption font-semibold px-xs py-[3px]",
				type: "bg-surface text-steel font-mono text-code-sm px-xs py-[3px]",
				discount: "bg-brand-green text-primary text-caption font-semibold rounded-full px-xs py-[3px]",
				required:
					"bg-brand-error text-on-dark text-micro-uppercase font-semibold px-[6px] py-[3px]",
				neutral: "bg-surface text-steel text-caption px-xs py-[3px]",
			},
		},
		defaultVariants: {
			variant: "neutral",
		},
	},
);

export type BadgeProps = HTMLAttributes<HTMLSpanElement> &
	VariantProps<typeof badgeVariants>;

/** 徽章 / 标签 */
export function Badge({ className, variant, ...props }: BadgeProps) {
	return (
		<span className={cn(badgeVariants({ variant }), className)} {...props} />
	);
}