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

export default function QuoteImage({ props, paused }: SlideRuntimeProps) {
  const data = props as QuoteImageData;
  const eyebrow = String(data.eyebrow ?? "Quote image");
  const quote = String(
    data.quote ?? "Good explanation makes hard ideas feel graspable."
  );
  const attribution = String(data.attribution ?? "Glitch University");
  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 ?? quote);
  const imagePosition = data.imagePosition === "right" ? "right" : "left";

  return (
    <article
      className={`quote-image ${
        paused ? "quote-image--paused" : ""
      } quote-image--image-${imagePosition}`}
    >
      <div className="quote-image__panel quote-image__panel--image">
        <img className="quote-image__image" src={imageSrc} alt={imageAlt} />
      </div>
      <div className="quote-image__panel quote-image__panel--quote">
        <div className="quote-image__content">
          <p className="quote-image__eyebrow">{eyebrow}</p>
          <blockquote className="quote-image__quote">"{quote}"</blockquote>
          <p className="quote-image__attribution">{attribution}</p>
        </div>
      </div>
    </article>
  );
}
