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

function normalizeSteps(value: unknown): string[] {
  if (!Array.isArray(value) || value.length === 0) {
    return [
      "Record talking-head segments",
      "Align transcript to timeline",
      "Generate slide variants",
      "Play, compare, and refine"
    ];
  }

  return value.map((step) => String(step));
}

export default function ProcessFlow({ props, paused }: SlideRuntimeProps) {
  const data = props as ProcessFlowData;
  const eyebrow = String(data.eyebrow ?? "Process flow");
  const title = String(data.title ?? "How it becomes a video");
  const steps = normalizeSteps(data.steps);

  return (
    <article className={`process-flow ${paused ? "process-flow--paused" : ""}`}>
      <div className="process-flow__content">
        <p className="process-flow__eyebrow">{eyebrow}</p>
        <h2 className="process-flow__title">{title}</h2>
        <div className="process-flow__steps">
          {steps.map((step, index) => (
            <div key={`${index}-${step}`} className="process-flow__step">
              <span className="process-flow__index">{index + 1}</span>
              <p className="process-flow__label">{step}</p>
            </div>
          ))}
        </div>
      </div>
    </article>
  );
}
