import type { FullscreenSplitData } from "@gnommo/slide-contracts";
import type { SlideRuntimeProps } from "../types/lecture";

export default function FullscreenSplit({ props, paused }: SlideRuntimeProps) {
  const data = props as FullscreenSplitData;
  const eyebrow = String(data.eyebrow ?? "Fullscreen split");
  const title = String(data.title ?? "One image. One idea.");
  const body = String(data.body ?? "Fullscreen keeps the seam invisible.");
  const imageSrc = String(
    data.imageSrc ??
      "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80"
  );
  const imageAlt = String(data.imageAlt ?? title);
  const imagePosition = data.imagePosition === "right" ? "right" : "left";

  return (
    <article
      className={`fullscreen-split ${
        paused ? "fullscreen-split--paused" : ""
      } fullscreen-split--image-${imagePosition}`}
    >
      <div className="fullscreen-split__panel fullscreen-split__panel--image">
        <img className="fullscreen-split__image" src={imageSrc} alt={imageAlt} />
      </div>
      <div className="fullscreen-split__panel fullscreen-split__panel--text">
        <div className="fullscreen-split__text">
          <p className="fullscreen-split__eyebrow">{eyebrow}</p>
          <h2 className="fullscreen-split__title">{title}</h2>
          <p className="fullscreen-split__body">{body}</p>
        </div>
      </div>
    </article>
  );
}
