---
import { getCollection } from "astro:content";
import { SITE, POSTS } from "@consts";
import ShowcasePost from "@components/ShowcasePost.astro";
import Layout from "@layouts/Layout.astro";

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

<Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
  <h1 class="animate-reveal text-3xl font-semibold break-words opacity-0">
    {POSTS.TITLE}
  </h1>
  <ol
    class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
  >
    {
      //import type { CollectionEntry } from "astro:content";
      //posts.map((article: CollectionEntry<"posts">) => (
      posts.map((article: any) => <ShowcasePost collection={article} />)
    }
  </ol>
  <div class="animate-reveal flex justify-end opacity-0 [animation-delay:0.2s]">
    <a
      href="/posts.xml"
      class="text-tertiary hover:text-secondary text-xs transition-colors duration-300"
      >View posts feed</a
    >
  </div>
</Layout>
