"use client";

import { useEffect, useState } from "react";
import { useReducedMotion } from "framer-motion";

export function InteractiveShell({ children }: { children: React.ReactNode }) {
  const [ready, setReady] = useState(false);
  const reduce = useReducedMotion();

  useEffect(() => {
    setReady(true);
  }, []);

  useEffect(() => {
    if (!ready || reduce) return;
    const root = document.documentElement;
    const onMove = (e: PointerEvent) => {
      root.style.setProperty("--mx", `${e.clientX}px`);
      root.style.setProperty("--my", `${e.clientY}px`);
    };
    window.addEventListener("pointermove", onMove, { passive: true });
    return () => window.removeEventListener("pointermove", onMove);
  }, [ready, reduce]);

  return (
    <>
      {ready && !reduce ? (
        <div className="cursor-glow" aria-hidden="true" />
      ) : null}
      {children}
    </>
  );
}