---
import BaseLayout from "@components/base/BaseLayout.astro";
import DocCard from "@components/docs/Card.astro";
import PageHeader from "@components/common/PageHeader.astro";
import type { DocsEntry } from "@/types";

interface Props {
  collectionIndex: DocsEntry;
  entries: DocsEntry[]; // this could either be the set of entries in a doc group, or the set of indices of the doc groups
}

const { collectionIndex, entries } = Astro.props;
---

<BaseLayout
  title={collectionIndex.data.title}
  image={collectionIndex.data.image?.src}
  description={collectionIndex.data.description}
>
  <PageHeader title={collectionIndex.data.title} />
  <section class="section">
    <div class="container">
      <div class="row">
        {
          entries.map((entry) => (
            <div class="md:col-6 lg:col-4 h-min p-2">
              <DocCard entry={entry} />
            </div>
          ))
        }
      </div>
    </div>
  </section>
</BaseLayout>
