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

	export let length: number = 6; // Number of posts to return

	async function getPosts(length: number): Promise<ArticleSummary[]> {
		const res = await fetch('/posts/latest');
		const json = await res.json();
		console.log(json);
		return json;
	}
</script>

{#await getPosts(length)}
	<EmptyCard><p class="message">Awaiting posts</p></EmptyCard>
{:then posts}
	{#each posts as post}
		<PostCard {post} />
	{/each}
{:catch}
	<EmptyCard><p class="message">Unable to fetch posts</p></EmptyCard>
{/await}

<style>
	.message {
		color: var(--light-text-color);
	}
</style>
