<script lang="ts">
	import KurveDemo from '$lib/components/KurveDemo.svelte';

	interface Player {
		name: string;
		rating: number;
		avatarUrl?: string;
	}

	let topPlayers: Player[] = [
		{ name: 'Hein', rating: 2500, avatarUrl: '/avatars/hein.png' },
		{ name: 'Quenten', rating: 2350, avatarUrl: '/avatars/quenten.png' },
		{ name: 'Ferry', rating: 2200, avatarUrl: '/avatars/ferry.png' },
		{ name: 'Quentin', rating: 2100, avatarUrl: '/avatars/quentin.png' },
		{ name: 'Willem', rating: 2000, avatarUrl: '/avatars/willem.png' },
		{ name: 'Johnny', rating: 1900 },
		{ name: 'Alice', rating: 1800 },
		{ name: 'Bob', rating: 1700 }
	];
</script>

<main class="flex flex-1 flex-col items-center gap-8 p-8 lg:flex-row lg:justify-around">
	<!-- Hero Section -->
	<div class="hero flex items-center justify-center lg:w-1/2">
		<div class="hero-content flex flex-col gap-6 text-center">
			<div class="flex-start max-w-2xl">
				<h1 class="text-8xl font-bold italic">ACHTUNG!</h1>
				<p class="py-6 text-lg text-red-800">The Kurve Web Edition</p>
			</div>
			<div class="flex w-1/2 flex-col gap-6">
				<button class="btn bg-slate-200 text-black">Login with Email</button>
				<button class="btn bg-slate-200 text-black">Login with 42</button>
				<button class="btn bg-slate-200 text-black">Login with Google</button>
			</div>
		</div>
	</div>

	<!-- Ranking Table Card Section -->
	<div class="flex w-full items-center justify-center lg:w-1/2">
		<div
			class="card bg-base-100 w-3/4 max-w-2xl rounded-4xl border border-gray-700 opacity-90 shadow-xl shadow-gray-900"
		>
			<div class="card-body justify-center">
				<h2 class="card-title mb-4 w-full justify-center text-center text-2xl">TOP PLAYERS</h2>
				<div class="overflow-x-auto">
					<table class="table w-full text-center text-xl">
						<tbody>
							{#each topPlayers.slice(0, 6) as player, index (player.name)}
								<tr class="">
									<td class="py-4">
										<div class="avatar mx-auto">
											{#if player.avatarUrl}
												<div class="w-20 rounded-full">
													<img src={player.avatarUrl} alt="Avatar of {player.name}" />
												</div>
											{:else}
												<div class="skeleton w-20 rounded-full"></div>
											{/if}
											{#if index === 0}
												<div
													class="absolute text-2xl"
													style="transform: translate(-25%, -45%) rotate(-35deg);"
												>
													👑
												</div>
											{/if}
										</div>
									</td>
									<td class="py-4 text-left">{player.name}</td>
									<td class="text-success py-4 font-bold">{player.rating}</td>
								</tr>
							{/each}
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</main>
