---
import { getCollection } from "astro:content";
import PageLayout from "@/layouts/PageLayout.astro";
import TopLayout from "@/layouts/TopLayout.astro";
import BottomLayout from "@/layouts/BottomLayout.astro";
import { BLOG } from "@/consts";
import Blog from "@/components/Blog";

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

const tags = [...new Set(posts.flatMap((post) => post.data.tags))].sort(
    (a, b) => a.localeCompare(b),
);
---

<PageLayout title={BLOG.TITLE} description={BLOG.DESCRIPTION}>
    <TopLayout>
        <div class="animate font-departure page-heading">
            {BLOG.TITLE}
        </div>
    </TopLayout>
    <BottomLayout>
        <div class="animate">
            <Blog client:load tags={tags} data={posts} />
        </div>
    </BottomLayout>
</PageLayout>