import { useState } from "react";
import type { SlideRuntimeProps } from "../types/lecture";

interface ThreeDSlideData {
  title?: string;
  subtitle?: string;
}

export default function GdpVsSecurity3D({
  props,
  paused
}: SlideRuntimeProps) {
  const data = props as ThreeDSlideData;
  const [tilt, setTilt] = useState({ x: 0, y: 0 });
  const title = String(data.title ?? "Interactive 3D candidate");
  const subtitle = String(data.subtitle ?? "Experimental perspective");

  return (
    <article
      className={`slide-card slide-card--kinetic ${paused ? "slide-card--paused" : ""}`}
      onPointerMove={(event) => {
        const bounds = event.currentTarget.getBoundingClientRect();
        const x = (event.clientX - bounds.left) / bounds.width - 0.5;
        const y = (event.clientY - bounds.top) / bounds.height - 0.5;
        setTilt({
          x: y * -14,
          y: x * 18
        });
      }}
      onPointerLeave={() => {
        setTilt({ x: 0, y: 0 });
      }}
      style={{
        transform: `perspective(1200px) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`
      }}
    >
      <p className="eyebrow">Interactive-heavy</p>
      <h2>{title}</h2>
      <p>{subtitle}</p>
      <div className="slide-card__orbs" aria-hidden="true">
        <span />
        <span />
        <span />
      </div>
    </article>
  );
}
