---
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';
import NavBar from '../components/NavBar.astro';
import ArticleCard from '../components/ArticleCard.astro';
import { getReadingTime } from '../utils/reading-time';

const posts = await getCollection('posts');
const sortedPosts = posts.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
---

<BaseLayout title='Crash Test Dev'>
  <NavBar slot="nav" />
  <section class="post-list" aria-label="All posts">
    {sortedPosts.map((post) => (
      <ArticleCard
        title={post.data.title}
        date={post.data.date}
        type={post.data.type}
        summary={post.data.summary}
        slug={post.id}
        readingTime={post.body ? getReadingTime(post.body) : undefined}
      />
    ))}
  </section>
</BaseLayout>

<style>
  .post-list {
    max-width: var(--width-prose);
    margin-top: var(--space-6);
    margin-bottom: var(--space-12);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
</style>
