ParallaxTile

"use client";

import type { CSSProperties, ReactNode } from "react";
import { useReducedMotion } from "motion/react";

type ParallaxTileProps = {
  /** Put ParallaxLayer elements inside. */
  children: ReactNode;
  className?: string;
};

type ParallaxLayerProps = {
  children?: ReactNode;
  className?: string;
  /** Pixels this layer moves at the tile edge. Bigger = feels closer. Negative moves the other way. */
  depth?: number;
};

/* ParallaxTile: layers inside slide at different speeds with the pointer, so the card feels deep. */
export function ParallaxTile({
  children,
  className = "relative h-56 overflow-hidden rounded-2xl bg-[#100e1c] text-white",
}: ParallaxTileProps) {
  const reduce = useReducedMotion();

  const onMove = (e: React.PointerEvent<HTMLDivElement>) => {
    if (reduce) return;
    const el = e.currentTarget;
    const r = el.getBoundingClientRect();
    el.style.setProperty("--px", `${((e.clientX - r.left) / r.width) * 2 - 1}`);
    el.style.setProperty("--py", `${((e.clientY - r.top) / r.height) * 2 - 1}`);
  };

  const onLeave = (e: React.PointerEvent<HTMLDivElement>) => {
    e.currentTarget.style.setProperty("--px", "0");
    e.currentTarget.style.setProperty("--py", "0");
  };

  return (
    <div
      onPointerMove={onMove}
      onPointerLeave={onLeave}
      className={className}
      style={{ "--px": 0, "--py": 0 } as CSSProperties}
    >
      {children}
    </div>
  );
}

export function ParallaxLayer({ children, className = "", depth = 20 }: ParallaxLayerProps) {
  return (
    <div
      className={`transition-transform duration-300 ease-out motion-reduce:transition-none ${className}`}
      style={{ transform: `translate3d(calc(var(--px) * ${depth}px), calc(var(--py) * ${depth}px), 0)` }}
    >
      {children}
    </div>
  );
}