`components/mobile/AffiliateButton.tsx`

86 lines
'use client'

import { useState } from 'react';
import { Wine } from '@/lib/types/wine';
import { buildAffiliateUrl } from '@/lib/affiliates/urlBuilder';
import { trackAffiliateClick } from '@/lib/affiliates/tracker';

interface AffiliateButtonProps {
  wine: Wine;
  partnerId: string;
  partnerName: string;
  variant?: 'primary' | 'secondary' | 'outline';
  fullWidth?: boolean;
  showPrice?: boolean;
  className?: string;
}

export default function AffiliateButton({
  wine,
  partnerId,
  partnerName,
  variant = 'primary',
  fullWidth = false,
  showPrice = false,
  className = ''
}: AffiliateButtonProps) {
  const [clicking, setClicking] = useState(false);

  const handleClick = async (e: React.MouseEvent) => {
    e.preventDefault();
    setClicking(true);

    const affiliateUrl = buildAffiliateUrl(wine, partnerId);

    // Track the click
    await trackAffiliateClick(wine, partnerId, affiliateUrl);

    // Open in new tab
    window.open(affiliateUrl, '_blank', 'noopener,noreferrer');

    // Reset state
    setTimeout(() => setClicking(false), 1000);
  };

  const variantClasses = {
    primary: 'bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700 shadow-lg hover:shadow-xl',
    secondary: 'bg-gradient-to-r from-blue-500 to-indigo-500 text-white hover:from-blue-600 hover:to-indigo-600',
    outline: 'border-2 border-purple-600 text-purple-600 hover:bg-purple-50'
  };

  return (
    <button
      onClick={handleClick}
      disabled={clicking}
      className={`
        ${fullWidth ? 'w-full' : ''}
        ${variantClasses[variant]}
        py-3 px-6 rounded-lg font-bold text-sm
        transition-all duration-300 transform
        active:scale-95 disabled:opacity-50
        flex items-center justify-center gap-2
        min-h-[44px] touch-manipulation
        ${className}
      `}
      style={{ WebkitTapHighlightColor: 'transparent' }}
    >
      {clicking ? (
        <>
          <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
          <span>Opening...</span>
        </>
      ) : (
        <>
          <span>View on {partnerName}</span>
          {showPrice && wine.price && (
            <span className="bg-white/20 px-2 py-1 rounded">
              ${wine.price}
            </span>
          )}
          <span>→</span>
        </>
      )}
    </button>
  );
}