---
import { type CollectionEntry, getCollection } from 'astro:content'
import Layout from '@layouts/Layout.astro'
import Container from '@components/Container.astro'
import ArrowCard from '@components/ArrowCard.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) => parseInt(b) - parseInt(a))
---

<Layout title="Blog" description="Blog">
  <Container>
    <div class="space-y-10">
      <div class="space-y-4">
        {
          years.map((year) => (
            <section class="space-y-4">
              <div class="font-semibold">{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>
  </Container>
</Layout>
