package component

type NavItem struct {
	name string
	href string
}

func getNavItems() []NavItem {
	return []NavItem{
		{
			name: "Movies",
			href: "/movies",
		},
	}
}

templ Navbar() {
	<div x-data="{ open: false }">
		<header class="bg-crust">
			<div
				class="mx-auto flex h-16 max-w-screen-xl items-center gap-8
                px-4 sm:px-6 lg:px-8"
			>
				<a class="block" href="#">
					<span class="text-3xl font-bold transition hover:text-green">
						<span class="hidden sm:inline">Project</span> Reshoot
					</span>
					<!-- logo here -->
				</a>
				<div class="flex flex-1 items-center justify-end sm:justify-between">
					<nav aria-label="Global" class="hidden sm:block">
						<ul class="flex items-center gap-6 text-xl">
							for _, item := range getNavItems() {
								<li>
									<a
										class="text-subtext1 hover:text-green
                                        transition"
										href={ templ.SafeURL(item.href) }
									>
										{ item.name }
									</a>
								</li>
							}
						</ul>
					</nav>
					<div class="flex items-center gap-2">
						<div class="sm:flex sm:gap-2">
							<a
								class="hidden rounded-lg px-4 py-2 sm:block 
                                bg-green hover:bg-green/75 text-mantle transition"
								href="/login"
							>
								Login
							</a>
							<a
								class="hidden rounded-lg px-4 py-2 sm:block
                                bg-blue text-mantle hover:bg-blue/75 transition"
								href="/register"
							>
								Register
							</a>
						</div>
						<button
							@click="open = !open"
							class="block rounded-lg p-2.5 sm:hidden transition
                            bg-surface0 text-subtext0 hover:text-overlay2/75"
						>
							<span class="sr-only">Toggle menu</span>
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="size-5"
								fill="none"
								viewBox="0 0 24 24"
								stroke="currentColor"
								stroke-width="2"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									d="M4 6h16M4 12h16M4 18h16"
								></path>
							</svg>
						</button>
					</div>
				</div>
			</div>
		</header>
		@sideNav(getNavItems())
	</div>
}