---
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 "@components/Blog";
import { BLOG } from "@consts";

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 page-heading">
            {BLOG.TITLE}
        </div>
    </TopLayout>
    <BottomLayout>
        <div class="animate">
            <Blog client:load tags={tags} data={posts} />
        </div>
    </BottomLayout>
</PageLayout>