import { useRef, type ComponentProps } from "react";
export interface GlassPanelProps extends ComponentProps<"div"> {
  tilt?: boolean;
}
export function GlassPanel({
  tilt = false,
  className = "",
  children,
  onPointerMove,
  onPointerLeave,
  ...props
}: GlassPanelProps) {
  const ref = useRef<HTMLDivElement>(null);
  function reset() {
    ref.current?.style.removeProperty("transform");
  }
  return (
    <div
      {...props}
      className={`ynr-glass-track ${className}`}
      onPointerMove={(event) => {
        onPointerMove?.(event);
        if (
          !tilt ||
          event.pointerType !== "mouse" ||
          matchMedia("(prefers-reduced-motion: reduce)").matches
        )
          return;
        const rect = event.currentTarget.getBoundingClientRect();
        const x = ((event.clientX - rect.left) / rect.width - 0.5) * 6;
        const y = ((event.clientY - rect.top) / rect.height - 0.5) * -6;
        if (ref.current)
          ref.current.style.transform = `perspective(800px) rotateX(${y}deg) rotateY(${x}deg)`;
      }}
      onPointerLeave={(event) => {
        reset();
        onPointerLeave?.(event);
      }}
    >
      <div ref={ref} className="ynr-glass-panel">
        {children}
      </div>
    </div>
  );
}