---
import Layout from "~/layouts/PageLayout.astro";

import { SITE } from "~/config.mjs";
import { getAllPosts } from "~/utils/getAllPosts";
import BlogPostCard from "~/components/widgets/BlogPostCard.astro";
import Pagination from "~/components/widgets/Pagination.astro";

export async function getStaticPaths({ paginate }) {
  const posts = await getAllPosts();

  return paginate(posts, {
    pageSize: SITE.postsPerPage,
  });
}

const { page } = Astro.props;

const currentPage = page.currentPage ?? 1;

const title = `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${
  SITE.name
}`;
const description = "News and step-by-step guides about AstroWind";
const canonical = new URL(page.url.current, Astro.site);
---

<Layout meta={{ title, description, canonical }}>
  <main class="mt-20">
    <section class="px-4 sm:px-6 py-8 sm:py-16 lg:py-20 mx-auto max-w-3xl">
      <header>
        <h1
          class="text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-8 md:mb-16"
          style="
"
        >
          News and step-by-step guides about
          <span
            class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
            >AstroWind
          </span>
        </h1>
      </header>
      <ul>
        {
          page.data.map((post) => (
            <li class="mb-10 md:mb-16">
              <BlogPostCard post={post} />
            </li>
          ))
        }
      </ul>

      {
        (page.url.prev || page.url.next) && (
          <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
        )
      }
    </section>
  </main>
</Layout>