<script lang="ts">
	import * as NavigationMenu from '$lib/components/ui/navigation-menu';
	import AuthenticationDisplay from './AuthenticationDisplay.svelte';
	import SearchBar from './SearchBar.svelte';

	let pathname = $state(typeof window !== 'undefined' ? window.location.pathname : '/');

	function isActive(href: string): boolean {
		if (href === '/') {
			return pathname === '/';
		}
		return pathname.startsWith(href);
	}
</script>

<header class="sticky top-0 z-10 border-b bg-white/80 backdrop-blur dark:bg-gray-900/80">
	<nav class="mx-auto flex max-w-6xl items-center gap-4 px-4 py-3">
		<a href="/" class="flex items-center gap-2">
			<span class="rounded bg-primary px-2 py-1 font-bold text-white">FA</span>
			<span class="font-semibold">FictionArchive</span>
		</a>
		<NavigationMenu.Root viewport={false}>
			<NavigationMenu.List>
				<NavigationMenu.Item>
					<NavigationMenu.Link href="/novels" active={isActive('/novels')}>Novels</NavigationMenu.Link>
				</NavigationMenu.Item>
			</NavigationMenu.List>
		</NavigationMenu.Root>
		<div class="flex-1"></div>
		<SearchBar />
		<AuthenticationDisplay />
	</nav>
</header>
