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

export default function DefinitionCard({ props, paused }: SlideRuntimeProps) {
  const data = props as DefinitionCardData;
  const header = String(data.header ?? data.eyebrow ?? "Definition");
  const term = String(data.term ?? "Crystallization");
  const definition = String(
    data.definition ?? "An interactive talk becomes a fixed video."
  );
  const example = String(
    data.example ?? "Same source. Cleaner final cut."
  );

  return (
    <article
      className={`definition-card ${paused ? "definition-card--paused" : ""}`}
    >
      <div className="definition-card__content">
        <p className="definition-card__eyebrow">{header}</p>
        <h2 className="definition-card__term">{term}</h2>
        <p className="definition-card__definition">{definition}</p>
        <p className="definition-card__example">{example}</p>
      </div>
    </article>
  );
}
