import { useRef, useState } from "react";

// Subtle 3D perspective tilt on mouse move — used for the floating Ops Console.
export default function TiltCard({ children, className = "", max = 4 }: { children: React.ReactNode; className?: string; max?: number }) {
  const ref = useRef<HTMLDivElement>(null);
  const [t, setT] = useState({ rx: 0, ry: 0 });

  const onMove = (e: React.MouseEvent) => {
    const r = ref.current?.getBoundingClientRect();
    if (!r) return;
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    setT({ rx: -py * max, ry: px * max });
  };

  return (
    <div ref={ref} className={className} style={{ perspective: "1100px" }} onMouseMove={onMove} onMouseLeave={() => setT({ rx: 0, ry: 0 })} data-testid="tilt-card">
      <div
        style={{ transform: `rotateX(${t.rx}deg) rotateY(${t.ry}deg)`, transition: "transform 0.3s ease-out", transformStyle: "preserve-3d" }}
      >
        {children}
      </div>
    </div>
  );
}