export default function WorkflowRail({ recipes, complete = {}, total }) {
  return (
    <aside className="chapter-rail" aria-label="Workflows in this chapter">
      <p className="spec">Workflows in this chapter</p>
      <ol className="rail-list">
        {recipes.map((r, i) => {
          const done = !!complete[r.id];
          return (
            <li key={r.id}>
              <a className={`rail-card${done ? " is-done" : ""}`} href={`#${r.anchor}`}>
                <span className="rail-kicker">
                  {i + 1} of {total} · {r.id}
                </span>
                <span className="rail-title">{r.shortTitle}</span>
                <span className="rail-meta">
                  {r.time} · {r.cost}
                  {done ? " · done" : ""}
                </span>
                {r.kit && r.kit.tools && r.kit.tools.length ? (
                  <span className="rail-kit">{r.kit.tools.join(" · ")}</span>
                ) : null}
                {r.kit && r.kit.artifact ? (
                  <span className="rail-kit rail-out">{r.kit.artifact}</span>
                ) : null}
              </a>
            </li>
          );
        })}
      </ol>
      <a className="rail-skip" href={`#${recipes[0]?.anchor}-tryit`}>
        Skip to the first Try-it
      </a>
    </aside>
  );
}