"use client";
import { useRef, useEffect, FC } from "react";
import gsap from "gsap";

const GSAPCursor: FC = () => {
  const cursorRef = useRef<HTMLDivElement>(null);

  // For touch devices, return null
  if (typeof window !== "undefined" && "ontouchstart" in window) return null;

  useEffect(() => {
    // Initialize GSAP animation
    let xTo = gsap.quickTo(cursorRef.current, "x", {
      duration: 2,
      ease: "power2.out",
    });
    let yTo = gsap.quickTo(cursorRef.current, "y", {
      duration: 2,
      ease: "power2.out",
    });

    const onMouseMove = (e: MouseEvent) => {
      xTo(e.clientX);
      yTo(e.clientY);
    };

    window.addEventListener("mousemove", onMouseMove);

    return () => {
      window.removeEventListener("mousemove", onMouseMove);
    };
  }, []);

  return (
    <div
      ref={cursorRef}
      className="fixed w-8 h-8 rounded-full border-2 border-dotted border-red-500 bg-transparent pointer-events-none z-50"
      style={{
        transform: "translate(-50%, -50%)",
      }}
    />
  );
};

export default GSAPCursor;
