---
import { getCollection } from "astro:content";
import Main from "../../layouts/MainLayout.astro";
import TransFlagPanel from "../../layouts/TransFlagPanel.astro";
import Panel from "../../layouts/Panel.astro";
import "../../styles/blogIndex.scss";

const latestPosts = (await getCollection("blog")).sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
---

<Main title="Blog">
  <TransFlagPanel>
    <h1>Blog!!!</h1>
  </TransFlagPanel>
  {
    latestPosts.map((post) => {
      return (
        <a href={`/blog/${post.id}`} class="blog-post-link">
          <Panel
            title={`${post.data.title} - ${post.data.pubDate.toLocaleString()}`}
            customClass="blog-post-panel"
          >
            <p>{post.data.description}</p>
          </Panel>
        </a>
      );
    })
  }
</Main>