---
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 = posts.slice(0, 3);
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>
