import React, { useState } from 'react';

export const GreenBuyButton: React.FC<{ streamId: string }> = ({ streamId }) => {
  const [isPulsing, setIsPulsing] = useState(false);

  const handleBuy = async () => {
    setIsPulsing(true);
    window.dispatchEvent(new CustomEvent('open-checkout', {
      detail: { streamId }
    }));
    setTimeout(() => setIsPulsing(false), 300);
  };

  return (
    <button
      onClick={handleBuy}
      className={`
        relative px-8 py-4 rounded-full font-bold text-white text-lg
        bg-green-500 hover:bg-green-600 active:bg-green-700
        shadow-lg shadow-green-500/30
        transform transition-all duration-200
        ${isPulsing ? 'scale-110 animate-pulse' : 'hover:scale-105'}
        flex items-center gap-2
      `}
    >
      <span>BUY NOW</span>
      <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center animate-bounce">
        LIVE
      </span>
    </button>
  );
};