import React, { useEffect, useRef } from 'react';
import { gsap } from '../../lib/gsap.ts';
import { useReducedMotion } from '../../hooks/useReducedMotion.ts';

const CursorAccent: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null);
  const reduced = useReducedMotion();

  useEffect(() => {
    if (reduced) return;
    const el = ref.current;
    if (!el) return;

    const xTo = gsap.quickTo(el, 'x', { duration: 0.6, ease: 'power3.out' });
    const yTo = gsap.quickTo(el, 'y', { duration: 0.6, ease: 'power3.out' });

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

    window.addEventListener('mousemove', handleMouse);
    return () => window.removeEventListener('mousemove', handleMouse);
  }, [reduced]);

  if (reduced) return null;

  return (
    <div
      ref={ref}
      className="fixed top-0 left-0 w-8 h-8 rounded-full bg-[var(--brand-500)] opacity-30 pointer-events-none z-[9999] mix-blend-multiply hidden lg:block"
      style={{ transform: 'translate(-50%, -50%)' }}
    />
  );
};

export default CursorAccent;