---
import { type CollectionEntry, getCollection } from "astro:content";
import BlogCard from "@/components/BlogCard.astro";
import Breadcrumbs from "@/components/Breadcrumbs.astro";
import Container from "@/components/Container.astro";
import PaginationComponent from "@/components/ui/pagination";
import { SITE } from "@/consts";
import Layout from "@/layouts/Layout.astro";
import type { PaginateFunction } from "astro";

export async function getStaticPaths({
	paginate,
}: {
	paginate: PaginateFunction;
}) {
	const allPosts = await getCollection("blog", ({ data }) => !data.draft);
	return paginate(
		allPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf()),
		{ pageSize: SITE.postsPerPage },
	);
}

const { page } = Astro.props;

const postsByYear = page.data.reduce(
	(acc: Record<string, CollectionEntry<"blog">[]>, post) => {
		const year = post.data.date.getFullYear().toString();
		(acc[year] ??= []).push(post);
		return acc;
	},
	{},
);

const years = Object.keys(postsByYear).sort(
	(a, b) => Number.parseInt(b) - Number.parseInt(a),
);
---

<Layout title="Blog" description="Blog">
  <Container class="flex grow flex-col gap-y-6">
    <Breadcrumbs
      items={[
        { label: 'Blog', href: '/blog', icon: 'lucide:archive' },
        { label: `Page ${page.currentPage}`, icon: 'lucide:folder-open' },
      ]}
    />

    <div class="flex min-h-[calc(100vh-18rem)] flex-col gap-y-8">
      {
        years.map((year) => (
          <section class="flex flex-col gap-y-4">
            <div class="font-medium">{year}</div>
            <ul class="flex flex-col gap-4">
              {postsByYear[year].map((post) => (
                <li>
                  <BlogCard entry={post} />
                </li>
              ))}
            </ul>
          </section>
        ))
      }
    </div>

    <PaginationComponent
      currentPage={page.currentPage}
      totalPages={page.lastPage}
      baseUrl="/blog/"
      client:load
    />
  </Container>
</Layout>