"use client";

interface AfcPackageCardProps {
  amount: number;
  priceMxn: number;
  popular?: boolean;
  loading?: boolean;
  onSelect: () => void;
}

export function AfcPackageCard({
  amount,
  priceMxn,
  popular,
  loading,
  onSelect,
}: AfcPackageCardProps) {
  return (
    <button
      onClick={onSelect}
      disabled={loading}
      className={`relative group block w-full text-left bg-gray-900 rounded-2xl p-6 border transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 ${
        popular
          ? "border-amber-500/50 shadow-lg shadow-amber-500/10"
          : "border-white/5 hover:border-amber-500/30"
      }`}
    >
      {popular && (
        <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-amber-500 text-black text-xs font-bold px-3 py-1 rounded-full">
          POPULAR
        </span>
      )}

      <div className="flex items-center gap-4">
        <div className="w-14 h-14 rounded-full bg-amber-500/10 border border-amber-500/30 flex items-center justify-center shrink-0 group-hover:bg-amber-500/20 transition-colors">
          <span className="text-xl font-bold text-amber-400">{amount}</span>
        </div>
        <div className="flex-1">
          <p className="text-white font-semibold text-lg">{amount} AFC</p>
          <p className="text-gray-500 text-sm">AfterCoin</p>
        </div>
        <div className="text-right">
          <p className="text-2xl font-bold text-white">${priceMxn}</p>
          <p className="text-xs text-gray-500">MXN</p>
        </div>
      </div>
    </button>
  );
}