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

	import { cn } from '$lib/utils';

	export let data: PageData;

	const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];
</script>

<section class="flex h-full w-full flex-col gap-4">
	<header class="sticky flex items-center justify-between">
		<div class="flex flex-col">
			<h2 class="text-xl font-semibold">Tableau des scores</h2>
			<p class="text-muted-foreground">Suivez la progression des élèves en direct</p>
		</div>
	</header>
	<main class="pb-4">
		<div class="overflow-x-auto">
			<table class="table w-full min-w-max">
				<thead
					class="border-x border-b border-t border-border bg-card/50 text-sm text-muted-foreground"
				>
					<tr>
						<th scope="col" class="text-left">#</th>
						<th scope="col" class="text-left">Nom</th>
						<th scope="col" class="text-right">Score</th>
						<th scope="col" class="text-right">Complétions</th>
						<th scope="col" class="text-right">Essais</th>
					</tr>
				</thead>
				<tbody class="border-x border-b border-border bg-card align-middle">
					{#if data.leaderboard.length === 0}
						<tr>
							<td colspan="5" class="text-center">Aucun joueur n'a encore joué</td>
						</tr>
					{:else}
						{#each data.leaderboard as player (player)}
							<tr class={cn([SCORE_COLORS[player.rank - 1]])}>
								<td>{player.rank}</td>
								<td class="text-lg">{player.pseudo}</td>
								<td class="text-right">{player.score}</td>
								<td class="text-right">{player.completions}</td>
								<td class="text-right">{player.tries}</td>
							</tr>
						{/each}
					{/if}
				</tbody>
			</table>
		</div>
	</main>
</section>

<style>
	table > :not(caption) > * > * {
		padding: 0.5rem;
	}
</style>
