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

interface SplitSlideData {
  leftLabel?: string;
  rightLabel?: string;
  leftValue?: string;
  rightValue?: string;
}

export default function GdpVsSecuritySplit({ props, paused }: SlideRuntimeProps) {
  const data = props as SplitSlideData;
  const leftLabel = String(data.leftLabel ?? "Left");
  const rightLabel = String(data.rightLabel ?? "Right");
  const leftValue = String(data.leftValue ?? "Signal");
  const rightValue = String(data.rightValue ?? "Counter-signal");

  return (
    <article className={`split-slide ${paused ? "split-slide--paused" : ""}`}>
      <div className="split-slide__panel split-slide__panel--left">
        <span>{leftLabel}</span>
        <strong>{leftValue}</strong>
      </div>
      <div className="split-slide__divider" aria-hidden="true" />
      <div className="split-slide__panel split-slide__panel--right">
        <span>{rightLabel}</span>
        <strong>{rightValue}</strong>
      </div>
    </article>
  );
}
