import React, { useEffect, useContext } from 'react';
import { gsap } from 'gsap';
import { ThemeContext } from '../App';

const CustomCursor: React.FC = () => {
  const { theme } = useContext(ThemeContext);

  useEffect(() => {
    const cursor = document.querySelector('.cursor');
    const follower = document.querySelector('.cursor-follower');

    if (!cursor || !follower) return;

    gsap.set(cursor, { xPercent: -50, yPercent: -50 });
    gsap.set(follower, { xPercent: -50, yPercent: -50 });

    const pos = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
    const mouse = { x: pos.x, y: pos.y };
    const speed = 0.1;

    const xSet = gsap.quickSetter(cursor, "x", "px");
    const ySet = gsap.quickSetter(cursor, "y", "px");
    const xSetFollower = gsap.quickSetter(follower, "x", "px");
    const ySetFollower = gsap.quickSetter(follower, "y", "px");

    const mouseMove = (e: MouseEvent) => {
      mouse.x = e.clientX;
      mouse.y = e.clientY;
    };

    const animation = () => {
      const dt = 1.0 - Math.pow(1.0 - speed, gsap.ticker.deltaRatio());
      pos.x += (mouse.x - pos.x) * dt;
      pos.y += (mouse.y - pos.y) * dt;
      xSet(mouse.x);
      ySet(mouse.y);
      xSetFollower(pos.x);
      ySetFollower(pos.y);
    };

    window.addEventListener("mousemove", mouseMove);
    gsap.ticker.add(animation);

    return () => {
      window.removeEventListener("mousemove", mouseMove);
      gsap.ticker.remove(animation);
    };
  }, []);

  const accentColor = theme === 'dark' ? 'border-[#00ffff]' : 'border-[#0066cc]';
  const followerBg = theme === 'dark' ? 'bg-[radial-gradient(circle,_#00ffff,_transparent)]' : 'bg-[radial-gradient(circle,_#0066cc,_transparent)]';

  return (
    <div className="hidden md:block">
      <div className={`cursor fixed w-5 h-5 rounded-full pointer-events-none z-[9999] mix-blend-difference transition-colors duration-300 ${accentColor}`}></div>
      <div className={`cursor-follower fixed w-10 h-10 rounded-full pointer-events-none z-[9998] transition-colors duration-300 ${followerBg}`}></div>
    </div>
  );
};

export default CustomCursor;