<script lang="ts">
	import PostTag from '$lib/posts/PostTag.svelte';
	import EmptyCard from './EmptyCard.svelte';

	async function fetchTags() {
		const tags: string[] = [];
		const endpoint = '/posts/tag/all';
		const res = await fetch(endpoint);
		const json = await res.json();
		if (Array.isArray(json)) {
			for (const item of json) {
				tags.push(item);
			}
		}
		return tags;
	}
</script>

<EmptyCard>
	<div class="tag-box">
		{#await fetchTags()}
			<p class="message">Loading Tags...</p>
		{:then tags}
			{#each tags as tag}
				<div class="tag-link">
					<PostTag {tag} />
				</div>
			{/each}
		{:catch}
			<p class="message">Unable to load tags</p>
		{/await}
	</div>
</EmptyCard>

<style>
	.message {
		color: var(--island-txt-color);
	}

	.tag-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: baseline;
		row-gap: 15px;
	}
</style>
