---
import "@/styles/globals.css";
import { Image } from "astro:assets";

import Layout from "../../layouts/new.astro";

// Get blogposts from content folder
import { getCollection } from "astro:content";
const posts = (await getCollection("blog")).sort(
  (a, b) => a.data.date.valueOf() + b.data.date.valueOf()
);
---

<Layout>
  <div class="text-center my-10">
    <p>FOSC's Blog</p>
  </div>

  <div class="columns-3xs gap-4">
    {
      posts.map((post) => (
        <div class="max-w-xs mx-4">
          <a href={`/blog/${post.slug}/`}>
            <Image class="w-full h-auto" src={post.data.cover} alt={post.data.coverAlt} />
            <div class="p-4">
              <h4 class="text-xl font-semibold mb-2">{post.data.title}</h4>
            </div>
          </a>
        </div>
      ))
    }
  </div>
</Layout>
