---
import type { GetStaticPathsOptions, Page } from 'astro';
import invariant from "tiny-invariant";
import DefaultPageLayout from "../../layouts/default.astro";
import PostPreviewList from "../../components/PostPreviewList.astro";
import HeroContent from "../../components/HeroContent.astro";
import Paginator from "../../components/Paginator.astro";
import { getSettings, getAllPosts, type Post } from "@matthiesenxyz/astro-ghostcms/api";

export async function getStaticPaths({ paginate }:GetStaticPathsOptions) {
  const posts = await getAllPosts();
  return paginate(posts, {
    pageSize: 5,
  });
}

export type Props = {
  page: Page<Post>
};

const settings = await getSettings();
invariant(settings, "Settings are required");

const title = settings.title;
const description = settings.description;
const { page } = Astro.props as Props;
---

<DefaultPageLayout
  content={{ title, description }}
  settings={settings}
  bodyClass={"home-template"}
>
  <HeroContent
    mainTitle={"Archives"}
    description={"All the posts"}
    featureImg={settings.cover_image || ""}
    settings={settings}
    addClass={"hero-cta bg-gradient"}
  >
    <h1 class="site-title" slot="title">Archives</h1>
  </HeroContent>

  <main id="site-main" class="site-main outer">
    <div class="inner posts">
      <PostPreviewList posts={page.data} settings={settings} />
      <Paginator {page} />
    </div>
  </main>
</DefaultPageLayout>