/* The project's roadmap as a rail of stages — caddie's client timeline
 * (01-vision §4: done stages compact with a check, the active one expanded,
 * upcoming ones muted), drawn horizontally so the whole journey is one
 * glance. The stage the person is READING is marked separately from the one
 * that is ACTIVE: stepping back to see what a finished stage collected, or
 * forward to see what is coming, must never look like moving the project. */

export type StageItem = {
  id: string | number;
  title: string;
  status: "planned" | "active" | "done" | "skipped";
  /** A word under the title: "Completed 12 Aug", "Now", "Up next". */
  meta?: string;
};

export function Stages({
  items, selectedId, onSelect, ariaLabel,
}: {
  items: StageItem[];
  selectedId?: StageItem["id"] | null;
  onSelect?: (id: StageItem["id"]) => void;
  ariaLabel?: string;
}) {
  return (
    <ol className="cu-stages" aria-label={ariaLabel ?? "Project stages"}>
      {items.map((it) => (
        <li key={it.id}
            className={`cu-stage is-${it.status} ${it.id === selectedId ? "is-selected" : ""}`}>
          <button type="button" className="cu-stage-btn"
                  aria-current={it.status === "active" ? "step" : undefined}
                  aria-pressed={it.id === selectedId}
                  onClick={() => onSelect?.(it.id)} disabled={!onSelect}>
            <span className="cu-stage-node" aria-hidden="true">
              {it.status === "done" ? "✓" : it.status === "skipped" ? "–" : ""}
            </span>
            <span className="cu-stage-title">{it.title}</span>
            {it.meta && <span className="cu-stage-meta">{it.meta}</span>}
          </button>
        </li>
      ))}
    </ol>
  );
}