import { collectChapterKit } from "../../data/sample-chapter";

export default function ChapterKit({ recipes }) {
  const kit = collectChapterKit(recipes);
  if (!kit.tools.length && !kit.files.length) return null;

  return (
    <section className="chapter-kit" id="need" aria-label="What you need">
      <h2 className="chapter-kit-title">What you need</h2>
      <p className="chapter-kit-lede">
        {recipes.length} Try-it{recipes.length === 1 ? "" : "s"} on sample data. Nothing
        from a live client file.
      </p>
      <dl className="kit-grid">
        <div>
          <dt>Tools</dt>
          <dd>
            <ul>
              {kit.tools.map((t) => (
                <li key={t}>{t}</li>
              ))}
            </ul>
          </dd>
        </div>
        <div>
          <dt>Files</dt>
          <dd>
            <ul>
              {kit.files.map((f) => (
                <li key={f}>{f}</li>
              ))}
            </ul>
          </dd>
        </div>
        <div>
          <dt>Model</dt>
          <dd>
            <ul>
              {kit.models.map((m) => (
                <li key={m}>{m}</li>
              ))}
            </ul>
          </dd>
        </div>
        <div>
          <dt>Try-its</dt>
          <dd>
            <ul>
              {kit.tryits.map((t) => (
                <li key={t.id}>
                  {t.id} · {t.time} · {t.cost}
                </li>
              ))}
            </ul>
          </dd>
        </div>
      </dl>
    </section>
  );
}