---
import { getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro";
import BlogMeta from "../components/BlogMeta.astro";

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

<Layout title="blog" description="my personal blog">
	<div class="flex flex-col space-y-6">
		{
			posts.map((post) => (
				<a href={`/blog/${post.slug}`}>
					<article class="border border-dp-text-light/20 bg-dp-background2-light dark:bg-dp-background-dark p-4 space-y-2 rounded-xs">
						{post.data.image && (
							<img
								src={post.data.image}
								alt={post.data.imageAlt || ""}
								class="float-end size-16 rounded-sm"
							/>
						)}
						<h1>{post.data.title}</h1>
						<BlogMeta
							pubDate={post.data.pubDate}
							categories={post.data.categories}
						/>
						<p>{post.data.description}</p>
					</article>
				</a>
			))
		}
	</div>
</Layout>