<script lang="ts">
	import { NAV_LINKS, TRANSITION_COLORS } from "$lib/core/constants";
	import Logo from "$lib/components/atoms/logo.svelte";
	import Button from "$lib/components/ui/button/button.svelte";
	import { cn } from "$lib/utils";
	import MobileNavSheet from "./mobile-nav-sheet.svelte";
	import Icon from "$lib/components/atoms/icon.svelte";
	import BookWithBookmarkIcon from "~icons/solar/book-bookmark-linear";
	import MaxWidthWrapper from "../max-width-wrapper.svelte";
	import { SearchIcon } from "@lucide/svelte";

	let { invert }: { invert: boolean } = $props();
</script>

<div class="h-24"></div>

<nav
	class={cn(
		"fixed left-0 top-0 z-50 grid w-screen place-items-center bg-white/80 drop-shadow-md backdrop-blur-md",
	)}
>
	<MaxWidthWrapper
		cls="flex w-full items-center justify-between gap-4 p-4 bg-transparent"
	>
		<div class="flex items-center gap-4">
			<a href="/">
				<Logo cls="w-auto h-8 md:h-10" />
			</a>

			<div
				class="hidden w-full items-center justify-center gap-2 lg:flex lg:gap-4"
			>
				{#each NAV_LINKS as link}
					<a
						href={link.link}
						class={cn(
							"w-28 rounded-lg px-4 py-2 text-center",
							"bg-transparent hover:bg-primary/10 hover:text-brand-700",
							TRANSITION_COLORS,
						)}
					>
						{link.name}
					</a>
				{/each}
			</div>
		</div>

		<div class="hidden items-center gap-2 lg:flex">
			<a href={"/track"}>
				<Button variant="ghost">
					<Icon icon={BookWithBookmarkIcon} cls="w-auto h-5" />
					<span>Track</span>
				</Button>
			</a>
			<a href={"/search"}>
				<Button>
					<Icon icon={SearchIcon} cls="w-auto h-5" />
					<span>Search Flights</span>
				</Button>
			</a>
		</div>
		<MobileNavSheet {invert} />
	</MaxWidthWrapper>
</nav>
