---
import Layout from "@layouts/Layout.astro";
import Main from "@layouts/Main.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import Pagination from "@components/Pagination.astro";
import Card from "@components/Card";
import { SITE } from "@config";
import type { Page } from "astro";
import type { CollectionEntry } from "astro:content";

export interface Props {
  page: Page<CollectionEntry<"blog">>;
}

const { page } = Astro.props;
---

<Layout title={`Posts | ${SITE.title}`}>
  <Header activeNav="posts" />
  <Main pageTitle="Posts" pageDesc="All the articles I've posted.">
    <ul>
      {
        page.data.map(({ data, id }) => (
          <Card href={`/posts/${id}/`} frontmatter={data} />
        ))
      }
    </ul>
  </Main>

  <Pagination {page} />

  <Footer noMarginTop={page.lastPage > 1} />
</Layout>
