---
import { getCollection } from 'astro:content';
import DefaultLayout from '@/layouts/DefaultLayout.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '@/consts';
import { ACTIVE_BLOG_SITE } from '@/blog-sites.js';
import { BlogPosts } from '@/components/sections/blog-posts';

const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
---

<DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
  <div class="py-16 md:py-28 lg:py-32">
    <div class="container max-w-5xl">
      <div class="mb-12">
        <h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
        <p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
      </div>
      <BlogPosts posts={posts} client:only="react" />
    </div>
  </div>
</DefaultLayout>
