<script lang="ts">
	import { Menu, X } from 'lucide-svelte';
	import SearchBar from './SearchBar.svelte';
	import ThemeToggle from './ThemeToggle.svelte';

	let mobileMenuOpen = $state(false);

	const navigation = [
		{ name: 'Home', href: '/' },
		{ name: 'Matches', href: '/matches' },
		{ name: 'Players', href: '/players' },
		{ name: 'About', href: '/about' }
	];
</script>

<header class="sticky top-0 z-50 w-full border-b border-base-300 bg-base-100/95 backdrop-blur-md">
	<div class="container mx-auto px-4">
		<div class="flex h-16 items-center justify-between">
			<!-- Logo -->
			<a href="/" class="transition-transform hover:scale-105" aria-label="teamflash.rip Home">
				<h1 class="text-2xl font-bold">
					<span class="text-primary">team</span><span class="text-secondary">flash.rip</span>
				</h1>
			</a>

			<!-- Desktop Navigation -->
			<nav class="hidden items-center gap-6 md:flex">
				{#each navigation as item}
					<a
						href={item.href}
						class="text-sm font-medium text-base-content/70 transition-colors hover:text-primary"
					>
						{item.name}
					</a>
				{/each}
			</nav>

			<!-- Search & Actions -->
			<div class="flex items-center gap-2">
				<SearchBar />
				<ThemeToggle />

				<!-- Mobile Menu Toggle -->
				<button
					class="btn btn-ghost btn-sm md:hidden"
					onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
					aria-label="Toggle menu"
				>
					{#if mobileMenuOpen}
						<X class="h-5 w-5" />
					{:else}
						<Menu class="h-5 w-5" />
					{/if}
				</button>
			</div>
		</div>

		<!-- Mobile Navigation -->
		{#if mobileMenuOpen}
			<nav class="animate-fade-in border-t border-base-300 py-4 md:hidden">
				{#each navigation as item}
					<a
						href={item.href}
						class="block px-4 py-2 text-sm font-medium text-base-content transition-colors hover:bg-base-200"
						onclick={() => (mobileMenuOpen = false)}
					>
						{item.name}
					</a>
				{/each}
			</nav>
		{/if}
	</div>
</header>
