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

export default function SquareYellow({ props, paused }: SlideRuntimeProps) {
  const data = props as SquareYellowData;
  const header = String(data.header ?? "Square yellow");
  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 ?? header);

  return (
    <article
      className={`square-slide square-slide--yellow ${
        paused ? "square-slide--paused" : ""
      }`}
    >
      <div className="square-slide__image-frame">
        <img className="square-slide__image" src={imageSrc} alt={imageAlt} />
      </div>
    </article>
  );
}
