import React from 'react';
import { MousePointer2 } from 'lucide-react';

interface MouseCursorProps {
    x: number;
    y: number;
    isClicking?: boolean;
}

export const MouseCursor: React.FC<MouseCursorProps> = ({ x, y, isClicking }) => {
    return (
        <div
            style={{
                position: 'absolute',
                left: 0,
                top: 0,
                transform: `translate3d(${x}px, ${y}px, 0)`,
                zIndex: 1000,
                pointerEvents: 'none',
            }}
        >
            <div
                style={{
                    transform: isClicking ? 'scale(0.85)' : 'scale(1)',
                }}
            >
                <MousePointer2
                    className="text-slate-900 fill-white"
                    size={48}
                    style={{
                        filter: 'drop-shadow(0 8px 16px rgba(0,0,0,0.2))',
                        transform: 'rotate(-15deg)'
                    }}
                />
                {isClicking && (
                    <div
                        className="absolute top-0 left-0 w-12 h-12 border-4 border-slate-400 rounded-full opacity-50"
                        style={{ transform: 'scale(1.2)' }}
                    />
                )}
            </div>
        </div>
    );
};