<script lang="ts">
	import { page } from '$app/stores';
	import Badge from '$lib/components/Badge.svelte';

	$: user = $page.data.user;
</script>

<section class="flex h-full w-full flex-col space-y-4">
	<header class="flex flex-col">
		<h1 class="text-xl font-semibold">Mes badges</h1>
		<p class="text-muted">Vos badges sont affichés ici, vous pouvez les partager avec vos amis</p>
	</header>
	<!-- <Separator /> -->
	<main class="flex flex-col justify-between space-x-0 space-y-4">
		<div class="flex space-x-2">
			{#if user?.badges}
				{#each user.badges as badge}
					<Badge name={badge.name} src={badge.logo} alt={badge.name} level={badge.level} />
				{/each}
			{:else}
				<p class="text-muted">Aucun badge</p>
			{/if}
		</div>
	</main>
</section>
