<script lang="ts">
	import type { PageData } from './$types';

	import BarChart from 'lucide-svelte/icons/bar-chart-2';
	import Users from 'lucide-svelte/icons/users';

	import Puzzle from '$lib/components/puzzle.svelte';
	import Button from '$lib/components/ui/button/button.svelte';

	export let data: PageData;
</script>

<section class="flex w-full flex-col gap-2">
	<header class="flex flex-col justify-between gap-2 lg:flex-row lg:items-center">
		<div class="flex flex-col">
			<h2 class="text-xl font-semibold">{data.chapter.name}</h2>
			{#if data.chapter?.puzzles?.length}
				<p class="text-muted-foreground">
					Ils vous restent {data.chapter.puzzles.filter((p) => !p.score).length} puzzles à résoudre sur
					un total de {data.chapter.puzzles.length}
				</p>
			{:else}
				<p class="text-muted-foreground">Le chapitre ne contient pour l'instant aucun puzzle</p>
			{/if}
		</div>
		<div class="flex gap-2">
			{#if data.chapter.start && data.chapter.end}
				<Button href="/chapters/{data.chapter.id}/groups">
					<Users class="mr-2 h-4 w-4" />
					Voir les groupes
				</Button>
				<Button href="/chapters/{data.chapter.id}/leaderboard">
					<BarChart class="mr-2 h-4 w-4" />
					Voir le classement
				</Button>
			{/if}
		</div>
	</header>
	<ul class="flex flex-col gap-2">
		{#if data.chapter?.puzzles?.length}
			{#each data.chapter.puzzles as puzzle (puzzle.id)}
				<Puzzle {puzzle} />
			{:else}
				<li
					class="flex h-16 w-full items-center justify-center rounded border border-border bg-card"
				>
					<p class="text-muted-foreground">Aucun puzzle trouvé</p>
				</li>
			{/each}
		{/if}
	</ul>
</section>
