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

	import type { Chapter as IChapter } from '$lib/types';

	import Chapter from '$lib/components/chapter.svelte';

	export let data: PageData;

	$: chapters = data.chapters;

	const toBeContinued: IChapter = {
		id: Math.random() * 999,
		name: 'To be continued ...',
		puzzles: [],
		show: false
	};
</script>

<section class="flex w-full flex-col gap-4">
	<header class="flex items-center justify-between">
		<div class="flex flex-col">
			<h2 class="text-xl font-semibold">Chapitres</h2>
			<p class="text-muted-foreground">
				Les challenges sont classés par chapitre. Vous pouvez résoudre les puzzles dans l'ordre que
				vous souhaitez.
			</p>
		</div>
	</header>
	<ul class="flex flex-col gap-4">
		{#each chapters as chapter (chapter.id)}
			<Chapter {chapter} />
		{/each}
		<Chapter chapter={toBeContinued} />
	</ul>
</section>
