"use client";

export type BadgeVariant =
  | "gold"
  | "platinum"
  | "silver"
  | "recommended"
  | "family"
  | "new"
  | "default";

interface CardBadgeProps {
  text: string;
  variant?: BadgeVariant;
  size?: "xs" | "sm" | "md";
}

export function CardBadge({ text, variant = "default", size = "md" }: CardBadgeProps) {
  const getVariantClasses = () => {
    switch (variant) {
      case "gold":
        return "bg-yellow-50 text-yellow-700 border-yellow-200";
      case "platinum":
        return "bg-indigo-50 text-indigo-700 border-indigo-200";
      case "silver":
        return "bg-gray-50 text-gray-700 border-gray-200";
      case "recommended":
        return "bg-green-50 text-green-700 border-green-200";
      case "family":
        return "bg-blue-50 text-blue-700 border-blue-200";
      case "new":
        return "bg-purple-50 text-purple-700 border-purple-200";
      default:
        return "bg-gray-50 text-gray-700 border-gray-200";
    }
  };

  const sizeClasses = (() => {
    switch (size) {
      case "xs":
        return "text-[11px] px-1.5 py-[2px]";
      case "sm":
        return "text-xs px-2 py-0.5";
      default:
        return "text-xs px-2.5 py-1";
    }
  })();

  return (
    <span
      className={`${sizeClasses} inline-flex items-center rounded-full font-medium border whitespace-nowrap ${getVariantClasses()}`}
    >
      {text}
    </span>
  );
}
