<script lang="ts">
	import '../app.css';
	import { page } from '$app/state';
	import type { Snippet } from 'svelte';
	import type { LayoutData } from './$types';

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

<svelte:head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>libnovel</title>
</svelte:head>

<div class="min-h-screen flex flex-col">
	<header class="border-b border-zinc-700 bg-zinc-900 sticky top-0 z-50">
		<nav class="max-w-6xl mx-auto px-4 h-14 flex items-center gap-6">
			<a href="/" class="text-amber-400 font-bold text-lg tracking-tight hover:text-amber-300">
				libnovel
			</a>
			{#if data.user}
			<a href="/books" class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors">
				Library
			</a>
			<a href="/browse" class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors">
				Browse
			</a>
			<a href="/ranking" class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors">
				Ranking
			</a>
				<div class="ml-auto flex items-center gap-4">
					<span class="text-zinc-400 text-sm hidden sm:block">{data.user.username}</span>
					<form method="POST" action="/logout">
						<button
							type="submit"
							class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors"
						>
							Sign out
						</button>
					</form>
				</div>
			{:else}
				<div class="ml-auto">
					<a
						href="/login"
						class="text-sm px-3 py-1.5 rounded bg-amber-400 text-zinc-900 font-semibold hover:bg-amber-300 transition-colors"
					>
						Sign in
					</a>
				</div>
			{/if}
		</nav>
	</header>

	<main class="flex-1 max-w-6xl mx-auto w-full px-4 py-8">
		{#key page.url.pathname + page.url.search}
			{@render children()}
		{/key}
	</main>

	<footer class="border-t border-zinc-800 text-zinc-600 text-xs text-center py-4">
		libnovel
	</footer>
</div>
