import type { TimelineStep } from "@/types";

/** Used only where content is a genuine sequence (a real process) — see Sprint 1 guidance on structural numbering. */
export function Timeline({ steps }: { steps: TimelineStep[] }) {
  return (
    <ol className="flex flex-col">
      {steps.map((step, i) => (
        <li key={step.title} className="relative border-l-2 border-line pb-12 pl-12 last:border-transparent last:pb-0">
          <span className="absolute -left-6 top-0 flex size-12 items-center justify-center rounded-full border-2 border-primary bg-paper font-display text-h4 font-medium text-primary shadow-2">
            {String(i + 1).padStart(2, "0")}
          </span>
          <p className="pt-1 font-mono text-[11px] uppercase tracking-wider text-primary">
            {step.label ?? `Stage ${i + 1}`}
          </p>
          <h3 className="mt-1.5 font-display text-h3 font-normal text-ink">{step.title}</h3>
          <p className="mt-2 max-w-prose text-body-sm text-ink-soft">{step.description}</p>
        </li>
      ))}
    </ol>
  );
}