1import { useState } from 'react';
 2import '../styles/ClickArea.css';
 3
 4interface ClickAreaProps {
 5  onCurrencyClick: () => void;
 6}
 7
 8const ClickArea = ({ onCurrencyClick }: ClickAreaProps) => {
 9  const [clickEffect, setClickEffect] = useState<{x: number, y: number, visible: boolean}>({
10    x: 0,
11    y: 0,
12    visible: false
13  });
14
15  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
16    // Get click coordinates relative to the clicked element
17    const rect = e.currentTarget.getBoundingClientRect();
18    const x = e.clientX - rect.left;
19    const y = e.clientY - rect.top;
20    
21    // Show effect at click position
22    setClickEffect({
23      x,
24      y,
25      visible: true
26    });
27    
28    // Hide effect after animation completes
29    setTimeout(() => {
30      setClickEffect(prev => ({...prev, visible: false}));
31    }, 300);
32    
33    // Trigger the actual currency click
34    onCurrencyClick();
35  };
36
37  return (
38    <div className="click-area" onClick={handleClick}>
39      <div className="click-button">
40        <span>CLICK ME</span>
41      </div>
42      
43      {clickEffect.visible && (
44        <div 
45          className="click-effect"
46          style={{
47            left: `${clickEffect.x}px`,
48            top: `${clickEffect.y}px`
49          }}
50        />
51      )}
52    </div>
53  );
54};
55
56export default ClickArea;