WSW/src/components/PricingCard.tsx

'use client';

interface PricingCardProps {
  label: string;
  price: string;
  productId: string;
  discordId: string;
  highlight?: boolean;
  badge?: string;
}

export default function PricingCard({ label, price, productId, discordId, highlight, badge }: PricingCardProps) {
  const storeName = process.env.NEXT_PUBLIC_SELLAPP_STORE || 'YOUR_SELLAPP_STORE_NAME';
  
  const handlePurchase = () => {
    // Build the Sell.app direct checkout URL with pre-filled Discord ID
    const checkoutUrl = `https://${storeName}.sell.app/product/${productId}?customFields[discord_id]=${encodeURIComponent(discordId)}`;
    window.open(checkoutUrl, '_blank');
  };

  return (
    <div className={`border ${highlight ? 'border-zinc-500 hover:border-white' : 'border-zinc-800 hover:border-zinc-600'} ${highlight ? 'bg-zinc-900' : 'bg-zinc-900/50'} p-6 flex flex-col items-center justify-between group transition-colors relative ${badge ? 'mt-4 sm:mt-0' : ''}`}>
      {badge && (
        <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-white text-black font-mono text-[8px] font-bold tracking-widest px-2 py-1 uppercase whitespace-nowrap">
          {badge}
        </div>
      )}
      <div className={`text-center mb-6 ${badge ? 'mt-2' : ''}`}>
        <div className={`font-mono text-[9px] tracking-widest ${highlight ? 'text-white' : 'text-zinc-500'} uppercase mb-2`}>{label}</div>
        <div className="text-xl font-bold font-mono tracking-tighter text-white">{price}</div>
      </div>
      <button
        onClick={handlePurchase}
        className={`w-full text-center px-4 py-3 font-mono text-[9px] font-bold tracking-widest transition-colors uppercase cursor-pointer ${
          highlight
            ? 'bg-white text-black group-hover:bg-zinc-200'
            : 'bg-zinc-800 text-white group-hover:bg-white group-hover:text-black'
        }`}
      >
        Purchase
      </button>
    </div>
  );
}