"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-warning-bg text-warning border-warning-border";
      case "platinum":
        return "bg-neutral-bg text-neutral border-neutral-border";
      case "silver":
        return "bg-neutral-soft text-neutral border-neutral-border";
      case "recommended":
        return "bg-success-bg text-success border-success-border";
      case "family":
        return "bg-info-soft text-info border-info-border";
      case "new":
        return "bg-primary/10 text-primary border-primary/20";
      default:
        return "bg-neutral-soft text-neutral border-neutral-border";
    }
  };

  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>
  );
}
