<script lang="ts">
	import ProfileButton from '$lib/components/ProfileButton.svelte';
	import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
	import { resolve } from '$app/paths';

	let { children, data } = $props();
</script>

<div class="min-h-screen bg-slate-950">
	<header class="fixed top-0 right-0 left-0 z-50 border-b border-white/5 bg-slate-950/95 backdrop-blur">
		<div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
			<a href={resolve("/")} class="text-lg font-black uppercase tracking-[0.15em] text-amber-50 transition hover:text-amber-100">
				OnePieceDle
			</a>
			<div class="flex items-center gap-3">
				<LanguageSwitcher />
				<ProfileButton user={data.user} />
			</div>
		</div>
	</header>
	<main class="pt-20">
		{@render children()}
	</main>
</div>
