---
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-12 md:py-20 lg:py-24">
    <div class="container max-w-5xl">
      <div class="mb-10">
        <h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
        <p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
      </div>
      <BlogPosts posts={posts} client:only="react" />
    </div>
  </div>
</DefaultLayout>