"use client";

import { useEffect, useRef } from "react";
import { gsap } from "gsap";

export default function CustomCursor({ hovered }) {
  const cursorRef = useRef(null);
  const size = hovered ? "80px" : "20px";

  useEffect(() => {
    const cursor = cursorRef.current;

    if (!cursor) return;

    const moveCursor = (e) => {
      gsap.to(cursor, {
        x: e.clientX,
        y: e.clientY,
        duration: 0.2,
        ease: "power2.out",
      });
    };

    window.addEventListener("mousemove", moveCursor);

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

  return (
    <div
      ref={cursorRef}
      className={`hidden md:block pointer-events-none fixed top-0 left-0 z-[9999] -translate-x-1/2 -translate-y-1/2  rounded-full bg-white mix-blend-difference transition-[width,height] duration-200   `}
      style={{
        width: size,
        height: size,
      }}
    >
      {/* Content appears only when hovered */}
      {hovered && (
        <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center font-bold text-black">
          Drag
        </span>
      )}
    </div>
  );
}
