import { useState } from 'react';
import '../styles/ClickArea.css';

interface ClickAreaProps {
  onCurrencyClick: () => void;
}

const ClickArea = ({ onCurrencyClick }: ClickAreaProps) => {
  const [clickEffect, setClickEffect] = useState<{x: number, y: number, visible: boolean}>({
    x: 0,
    y: 0,
    visible: false
  });

  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
    // Get click coordinates relative to the clicked element
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    // Show effect at click position
    setClickEffect({
      x,
      y,
      visible: true
    });
    
    // Hide effect after animation completes
    setTimeout(() => {
      setClickEffect(prev => ({...prev, visible: false}));
    }, 300);
    
    // Trigger the actual currency click
    onCurrencyClick();
  };

  return (
    <div className="click-area" onClick={handleClick}>
      <div className="click-button">
        <span>CLICK ME</span>
      </div>
      
      {clickEffect.visible && (
        <div 
          className="click-effect"
          style={{
            left: `${clickEffect.x}px`,
            top: `${clickEffect.y}px`
          }}
        />
      )}
    </div>
  );
};

export default ClickArea;