---
/**
 * PostCard Component
 *
 * Displays a post preview with optional featured image.
 *
 * IMPORTANT: Image fields are objects with { src, alt }, not strings!
 */

interface Props {
	title: string;
	href: string;
	date?: string;
	excerpt?: string;
	// Image fields from EmDash are always { src?: string, alt?: string }
	featuredImage?: {
		src?: string;
		alt?: string;
	};
}

const { title, href, date, excerpt, featuredImage } = Astro.props;

const formattedDate = date
	? new Date(date).toLocaleDateString("en-US", {
			year: "numeric",
			month: "long",
			day: "numeric",
		})
	: null;
---

<article class="post-card">
	{/* Check featuredImage.src, not just featuredImage */}
	{
		featuredImage?.src && (
			<a href={href} class="post-card-image">
				<img src={featuredImage.src} alt={featuredImage.alt || title} loading="lazy" />
			</a>
		)
	}

	<div class="post-card-content">
		<h2 class="post-card-title">
			<a href={href}>{title}</a>
		</h2>

		{formattedDate && <p class="post-card-meta">{formattedDate}</p>}

		{excerpt && <p class="post-card-excerpt">{excerpt}</p>}
	</div>
</article>