/**
 * V21 Tag 标签 / Badge 徽标
 * 封装 Ant Design Tag 和 Badge，应用 V21 设计系统样式
 */
import React from "react";
import { Tag as AntTag, Badge as AntBadge } from "antd";
import type {
  TagProps as AntTagProps,
  BadgeProps as AntBadgeProps,
} from "antd";
import classNames from "classnames";
import "./ui.css";

export type TagVariant = "primary" | "success" | "warning" | "error" | "info";

export interface TagProps extends AntTagProps {
  /** V21 语义变体 */
  variant?: TagVariant;
}

const VARIANT_CLASS_MAP: Record<TagVariant, string> = {
  primary: "xx-tag-primary",
  success: "xx-tag-success",
  warning: "xx-tag-warning",
  error: "xx-tag-error",
  info: "xx-tag-info",
};

/** Tag 标签 */
const Tag: React.FC<TagProps> = ({ className, variant, ...rest }) => {
  const v21Class = classNames(
    "xx-tag",
    variant && VARIANT_CLASS_MAP[variant],
    className,
  );
  return <AntTag className={v21Class} {...rest} />;
};

/** Badge 徽标 */
const Badge: React.FC<AntBadgeProps> = ({ className, ...rest }) => {
  const v21Class = classNames("xx-badge", className);
  return <AntBadge className={v21Class} {...rest} />;
};

export { Tag, Badge };
export default Tag;
