---
/**
 * Posts Archive
 */

import { getEmDashCollection } from "emdash";
import Base from "../../layouts/Base.astro";
import PostCard from "../../components/PostCard.astro";

const { entries: posts } = await getEmDashCollection("posts", {
	status: "published",
});
---

<Base title="Blog">
	<div class="container">
		<div class="content-width">
			<header class="archive-header">
				<h1>Blog</h1>
			</header>

			{
				posts.length > 0 ? (
					<div class="posts-list">
						{posts.map((post) => (
							<PostCard
								title={post.data.title}
								href={`/posts/${post.data.slug || post.id}`}
								date={post.data.published_at}
								excerpt={post.data.excerpt}
								featuredImage={
									post.data.featured_image?.src
										? {
												src: post.data.featured_image.src,
												alt: post.data.featured_image.alt || post.data.title,
											}
										: undefined
								}
							/>
						))}
					</div>
				) : (
					<p class="text-muted">No posts found.</p>
				)
			}
		</div>
	</div>
</Base>