<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 space-y-6">
	<header class="sticky flex items-center justify-between">
		<div class="flex flex-col">
			<h1 class="text-xl font-semibold">Chapitres</h1>
			<p class="text-muted">
				Les chapitres sont les différentes parties du jeu. Chaque chapitre est composé de plusieurs
				puzzles.
			</p>
		</div>
	</header>
	{#each chapters as chapter}
		<Chapter {chapter} />
	{/each}
	<Chapter chapter={toBeContinued} />
</section>
