---
/**
 * Homepage / Blog Index
 *
 * Demonstrates:
 * - getEmDashCollection for listing entries
 * - Passing image fields correctly to components
 */

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

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

<Base>
	<div class="container">
		<div class="content-width">
			{
				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}
								{
								/*
									IMPORTANT: featured_image is { src, alt }, not a string!
									Pass the whole object, or extract src/alt explicitly.
								*/ }
								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 yet.</p>
				)
			}
		</div>
	</div>
</Base>