---
import { type CollectionEntry, getCollection } from "astro:content";
import ArrowCard from "@components/ArrowCard.astro";
import Container from "@components/Container.astro";
import { SITE } from "@consts";
import { HOME } from "@consts";
import Layout from "@layouts/Layout.astro";

const data = (await getCollection("blog"))
	.filter((post) => !post.data.draft)
	.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());

type Acc = {
	[year: string]: CollectionEntry<"blog">[];
};

const posts = data.reduce((acc: Acc, post) => {
	const year = post.data.date.getFullYear().toString();
	if (!acc[year]) {
		acc[year] = [];
	}
	acc[year].push(post);
	return acc;
}, {});

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

<Layout title={HOME.TITLE} description={SITE.DESCRIPTION}>
  <Container>
    <aside>
      <div class="space-y-10">
        <div class="space-y-4">
          {
            years.map((year) => (
              <section class="animate space-y-4">
                <div class="font-semibold text-black dark:text-white">{year}</div>
                <div>
                  <ul class="not-prose flex flex-col gap-4">
                    {posts[year].map((post) => (
                      <li>
                        <ArrowCard entry={post} />
                      </li>
                    ))}
                  </ul>
                </div>
              </section>
            ))
          }
        </div>
      </div>
    </aside>
  </Container>
</Layout>
