<script lang="ts">
	interface PostCardProps {
		slug: string;
		title: string;
		date: string;
		excerpt: string;
		image?: string;
	}

	let { slug, title, date, excerpt, image }: PostCardProps = $props();
</script>

<article class="group overflow-hidden rounded-lg border border-gray-200 transition hover:shadow-lg">
	<a href="/posts/{slug}" class="block">
		{#if image}
			<div class="overflow-hidde aspect-video w-full">
				<img
					src={image}
					alt={title}
					class="h-full w-full object-cover transition duration-300 group-hover:scale-105"
				/>
			</div>
		{/if}
		<div class="p-6">
			<h2 class="mb-2 text-2xl font-semibold transition group-hover:text-electric-violet-800">
				{title}
			</h2>
			<p class="mb-2 text-gray-600">{date}</p>
			<p class="text-gray-700">{excerpt}</p>
		</div>
	</a>
</article>
