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

	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="/" class="text-lg font-black uppercase tracking-[0.15em] text-amber-50 transition hover:text-amber-100">
				OnePieceDle
			</a>
			<ProfileButton user={data.user} />
		</div>
	</header>
	<main class="pt-20">
		{@render children()}
	</main>
</div>
