import React, { useState } from 'react';

interface ClickButtonProps {
  onClick: () => void;
  imageUrl: string;
  clickMultiplier: number;
}

export function ClickButton({ onClick, imageUrl, clickMultiplier }: ClickButtonProps) {
  const [clickEffect, setClickEffect] = useState(false);

  const handleClick = () => {
    setClickEffect(true);
    onClick();
    setTimeout(() => setClickEffect(false), 200);
  };

  return (
    <div className="flex flex-col items-center space-y-4">
      <div 
        className={`relative cursor-pointer transition-all duration-200 hover:scale-110 ${
          clickEffect ? 'scale-125 animate-pulse' : ''
        }`}
        onClick={handleClick}
      >
        <img 
          src={imageUrl} 
          alt="Spinning Rat" 
          className="w-48 h-48 rounded-full border-4 border-pink-500 shadow-2xl hover:border-cyan-400 transition-all duration-300"
          style={{
            filter: 'drop-shadow(0 0 20px #ff1493) drop-shadow(0 0 40px #00bfff)',
            animation: 'spin 2s linear infinite'
          }}
        />
        {clickEffect && (
          <div className="absolute inset-0 pointer-events-none">
            <div className="text-yellow-300 text-4xl font-bold animate-bounce absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8">
              +{clickMultiplier}
            </div>
            <div className="absolute inset-0 rounded-full bg-yellow-300 opacity-20 animate-ping"></div>
          </div>
        )}
      </div>
      
      <div className="text-center">
        <p className="text-pink-300 font-bold text-xl">
          Click Power: {clickMultiplier}x
        </p>
        <p className="text-cyan-300 text-lg">
          Click the spinning rat!
        </p>
      </div>
    </div>
  );
}