<script lang="ts">
	import type { ArticleSummary } from '$lib/posts/types';
	import EmptyCard from './EmptyCard.svelte';
	import PostTag from '$lib/posts/PostTag.svelte';

	export let post: ArticleSummary;
</script>

<a href="/posts/{post.slug}">
	<EmptyCard>
		<h1 class="post-title">{post.title}</h1>
		<h2 class="post-date">{new Date(post.date).toLocaleDateString()}</h2>
		<br />
		<p class="post-summary">{post.summary}</p>
		<br />
		<div class="tag-container">
			{#each post.tags as tag}
				<PostTag {tag} />
			{/each}
		</div>
	</EmptyCard>
</a>

<style>
	a {
		text-decoration: none;
		color: var(--island-txt-color);
	}

	.tag-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
</style>
