"use client";

import { useEffect, useRef } from "react";

export function CustomCursor() {
  const dot = useRef<HTMLDivElement>(null);
  const cross = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (window.matchMedia("(pointer: coarse)").matches) return;

    const onMove = (e: PointerEvent) => {
      const t = `translate3d(${e.clientX}px, ${e.clientY}px, 0)`;
      if (dot.current) dot.current.style.transform = t;
      if (cross.current) cross.current.style.transform = t;
    };

    const onOver = (e: MouseEvent) => {
      const target = e.target as HTMLElement | null;
      const hoverable = target?.closest("a, button, [data-cursor='hover']");
      cross.current?.classList.toggle("is-hover", Boolean(hoverable));
    };

    window.addEventListener("pointermove", onMove);
    document.addEventListener("mouseover", onOver);
    return () => {
      window.removeEventListener("pointermove", onMove);
      document.removeEventListener("mouseover", onOver);
    };
  }, []);

  return (
    <>
      <div ref={dot} className="cursor-dot hidden lg:block" />
      <div ref={cross} className="cursor-cross hidden lg:block" />
    </>
  );
}