/**
 * 统一的 Badge 组件
 * 用于状态标签、标记等
 */
import React from "react";
import type { LucideIcon } from "lucide-react";

export type BadgeVariant = "default" | "success" | "warning" | "danger" | "info" | "purple" | "gray" | "blue" | "secondary";
export type BadgeSize = "sm" | "md" | "lg";

export interface BadgeProps {
  children: React.ReactNode;
  variant?: BadgeVariant;
  size?: BadgeSize;
  icon?: LucideIcon;
  className?: string;
}

const variantStyles: Record<BadgeVariant, string> = {
  default: "bg-slate-100 text-slate-700 border-slate-200",
  success: "bg-emerald-50 text-emerald-700 border-emerald-200",
  warning: "bg-amber-50 text-amber-700 border-amber-200",
  danger: "bg-red-50 text-red-700 border-red-200",
  info: "bg-blue-50 text-blue-700 border-blue-200",
  purple: "bg-violet-50 text-violet-700 border-violet-200",
  gray: "bg-slate-100 text-slate-600 border-slate-200",
  blue: "bg-blue-50 text-blue-700 border-blue-200",
  secondary: "bg-slate-100 text-slate-700 border-slate-200",
};

const sizeStyles: Record<BadgeSize, { badge: string; icon: string }> = {
  sm: { badge: "px-2 py-0.5 text-xs", icon: "w-3 h-3" },
  md: { badge: "px-3 py-1 text-sm", icon: "w-4 h-4" },
  lg: { badge: "px-4 py-1.5 text-base", icon: "w-5 h-5" },
};

export const Badge: React.FC<BadgeProps> = ({
  children,
  variant = "default",
  size = "md",
  icon: Icon,
  className = "",
}) => {
  const baseStyles = "inline-flex items-center gap-1.5 font-medium rounded-full border";

  const combinedClassName = `
    ${baseStyles}
    ${variantStyles[variant]}
    ${sizeStyles[size].badge}
    ${className}
  `.trim();

  return (
    <span className={combinedClassName}>
      {Icon && <Icon className={sizeStyles[size].icon} />}
      {children}
    </span>
  );
};