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

	$: user = $page.data.user;
	$: badges = user?.badges?.sort((a, b) => a.level - b.level);
</script>

<section class="flex h-full w-full flex-col gap-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>
	<main class="flex flex-col justify-between gap-4">
		<div class="flex flex-wrap gap-4">
			{#if badges && badges.length}
				{#each 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>
