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

interface BasicSlideData {
  eyebrow?: string;
  title?: string;
  body?: string;
  kicker?: string;
  accent?: string;
}

export default function GdpVsSecurityBasic({ props, paused }: SlideRuntimeProps) {
  const data = props as BasicSlideData;
  const eyebrow = String(data.eyebrow ?? "Glitch slide");
  const title = String(data.title ?? "A scored lecture variant");
  const body = String(
    data.body ??
      "This candidate stays lightweight and deterministic so the lecture can be re-rendered later in a crystallized pipeline."
  );
  const kicker = String(data.kicker ?? "Default template");
  const accent = String(data.accent ?? "rgb(245, 192, 70)");

  return (
    <article className={`basic-slide ${paused ? "basic-slide--paused" : ""}`}>
      <div className="basic-slide__content">
        <p className="basic-slide__eyebrow">{eyebrow}</p>
        <h2 className="basic-slide__title">{title}</h2>
        <p className="basic-slide__body">{body}</p>
        <div className="basic-slide__accent-bar" style={{ background: accent }} />
        <p className="basic-slide__kicker">{kicker}</p>
      </div>
    </article>
  );
}
