"use client";

import { Crown, Sparkles } from "lucide-react";

interface PremiumBadgeProps {
  tier: "premium" | "pro" | "free";
  size?: "sm" | "md" | "lg";
}

export default function PremiumBadge({ tier, size = "sm" }: PremiumBadgeProps) {
  const sizeMap = {
    sm: { px: "px-1.5 py-0.5", text: "text-[9px]", icon: 8, gap: "gap-0.5" },
    md: { px: "px-2 py-0.5", text: "text-[10px]", icon: 10, gap: "gap-1" },
    lg: { px: "px-2.5 py-1", text: "text-xs", icon: 12, gap: "gap-1" },
  };

  const s = sizeMap[size];

  if (tier === "premium") {
    return (
      <span
        className={`inline-flex items-center ${s.gap} ${s.px} rounded-full bg-gradient-to-r from-[#D4AF37]/20 to-yellow-900/20 border border-[#D4AF37]/50 ${s.text} font-semibold text-[#D4AF37] shadow-[0_0_6px_rgba(212,175,55,0.3)]`}
      >
        <Crown size={s.icon} className="text-[#D4AF37]" />
        Premium
      </span>
    );
  }

  if (tier === "pro") {
    return (
      <span
        className={`inline-flex items-center ${s.gap} ${s.px} rounded-full bg-gradient-to-r from-purple-900/30 to-violet-900/20 border border-purple-500/50 ${s.text} font-semibold text-purple-300 shadow-[0_0_8px_rgba(168,85,247,0.35)]`}
      >
        <Crown size={s.icon} className="text-purple-400" />
        Pro
      </span>
    );
  }

  // Free tier
  return (
    <span
      className={`inline-flex items-center ${s.gap} ${s.px} rounded-full bg-gray-800/40 border border-gray-700/50 ${s.text} font-medium text-gray-500`}
    >
      <Sparkles size={s.icon} className="text-gray-600" />
      Free
    </span>
  );
}