---
import Layout from '@layouts/Layout.astro'
import Container from '@components/Container.astro'
import { SITE } from '@consts'
import ArrowCard from '@components/ArrowCard.astro'
import Link from '@components/Link.astro'
import { getCollection } from 'astro:content'
import type { CollectionEntry } from 'astro:content'
import SocialIcons from '@components/SocialIcons.astro'

const blog = (await getCollection('blog'))
  .filter((post) => !post.data.draft)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
  .slice(0, SITE.NUM_POSTS_ON_HOMEPAGE)
---

<Layout title="Home" description="Home">
  <Container>
    <section class="space-y-6">
      <div class="flex flex-wrap items-center justify-between gap-y-2">
        <h2 class="font-semibold text-black dark:text-white">Latest posts</h2>
        <Link href="/blog"> See all posts </Link>
      </div>
      <ul class="not-prose flex flex-col gap-4">
        {
          blog.map((post) => (
            <li>
              <ArrowCard entry={post} />
            </li>
          ))
        }
      </ul>
    </section>
  </Container>
</Layout>