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

	import Puzzle from '$lib/components/Puzzle.svelte';

	export let data: PageData;

	data.chapter.puzzles = data.chapter.puzzles.sort((a, b) => a.scoreMax - b.scoreMax);
</script>

<section class="flex w-full flex-col space-y-6">
	<div class="flex flex-col gap-4">
		<div class="flex flex-col justify-between md:flex-row md:items-center">
			<div class="flex items-center gap-2">
				<h1 class="text-xl font-semibold">{data.chapter.name}</h1>
			</div>
		</div>
		<ul class="flex flex-col gap-4">
			{#each data.chapter.puzzles as puzzle}
				<Puzzle {puzzle} />
			{/each}
		</ul>
	</div>
</section>
