"use client";

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

export function HeroStage({ children }: { children: React.ReactNode }) {
  const [ready, setReady] = useState(false);
  const reduce = useReducedMotion();
  const ref = useRef<HTMLDivElement>(null);

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

  function onMove(e: React.PointerEvent) {
    if (!ready || reduce || !ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    ref.current.style.setProperty("--hx", `${x * 40}px`);
    ref.current.style.setProperty("--hy", `${y * 24}px`);
  }

  function onLeave() {
    if (!ref.current) return;
    ref.current.style.setProperty("--hx", "0px");
    ref.current.style.setProperty("--hy", "0px");
  }

  return (
    <div
      ref={ref}
      className="hero-stage"
      onPointerMove={onMove}
      onPointerLeave={onLeave}
    >
      {children}
    </div>
  );
}