import type { GlitchComponentFrameData } from "@gnommo/slide-contracts";
import { resolveGlitchComponentUrl } from "../lib/glitchComponentUrl";
import type { SlideRuntimeProps } from "../types/lecture";

export default function GlitchComponentFrame({
  props,
  displayMode,
  paused
}: SlideRuntimeProps) {
  const data = props as GlitchComponentFrameData;
  const header = String(data.header ?? "Interactive component");
  const componentId = String(data.componentId ?? "glitch-component");
  const componentUrl = resolveGlitchComponentUrl(
    componentId,
    String(data.componentUrl ?? "").trim()
  );
  const caption = String(
    data.caption ?? "Explore the model directly inside the slide."
  );

  return (
    <article
      className={`glitch-component-frame glitch-component-frame--${displayMode} ${
        paused ? "glitch-component-frame--paused" : ""
      }`}
    >
      <div className="glitch-component-frame__chrome">
        <p className="glitch-component-frame__eyebrow">{header}</p>
        <p className="glitch-component-frame__id">{componentId}</p>
      </div>
      <div className="glitch-component-frame__viewport">
        <iframe
          className="glitch-component-frame__iframe"
          src={componentUrl}
          title={header || componentId}
          loading="lazy"
          allow="fullscreen; autoplay; xr-spatial-tracking"
          sandbox="allow-scripts allow-same-origin allow-pointer-lock allow-popups allow-forms"
        />
      </div>
      <p className="glitch-component-frame__caption">{caption}</p>
    </article>
  );
}
