---
import { getCollection } from "astro:content";
const pages = await getCollection("blog");
import Layout from "@layouts/Layout.astro";
import HeroCard from "@components/HeroCard.astro";
import SmallCard from "@components/SmallCard.astro";

import { getLocale } from "astro-i18n-aut";
import { filterCollection } from "@i18n/utils";

const locale = getLocale(Astro.url);

const posts = filterCollection(pages, locale);

const featuredPosts = await Promise.all(
  posts.slice(0, 3).map(async (post) => {
    if (!post.data.headerImg) {
      return post;
    }
    const { default: image } = await import(
      `../../content/blog/${post.slug.split("/")[0]}/${post.data.headerImg}`
    );
    return {
      ...post,
      image,
    };
  }),
);

const otherPosts = posts.slice(3);
---

<Layout title="Dude">
  {featuredPosts.map((post) => <HeroCard post={post} />)}

  <div class="grid grid-cols-2 gap-4 mt-4">
    {otherPosts.map((post) => <SmallCard post={post} />)}
  </div>
</Layout>
