<script lang="ts">
	import { Sheet, SheetContent, SheetTrigger } from "$lib/components/ui/sheet";
	import { buttonVariants } from "$lib/components/ui/button";
	import IconMenu from "~icons/solar/hamburger-menu-broken";
	import IconClose from "~icons/mingcute/close-line";
	import { NAV_LINKS, TRANSITION_COLORS } from "$lib/core/constants";
	import { cn } from "$lib/utils";
	import Icon from "$lib/components/atoms/icon.svelte";
	import Logo from "$lib/components/atoms/logo.svelte";

	let { invert }: { invert: boolean } = $props();

	let open = $state(false);
</script>

<Sheet {open} onOpenChange={(to) => (open = to)}>
	<SheetTrigger
		class={cn(
			"block lg:hidden",
			buttonVariants({
				variant: invert ? "glassWhite" : "ghost",
				size: "icon",
			}),
		)}
		onclick={() => (open = true)}
	>
		<Icon icon={IconMenu} cls={"h-6 w-auto"} />
	</SheetTrigger>
	<SheetContent side="bottom" class="z-[101]">
		<button
			onclick={() => (open = false)}
			class="absolute right-4 top-4 grid place-items-center rounded-md border border-neutral-400 p-1 text-neutral-500"
		>
			<IconClose class="h-5 w-5" />
		</button>
		<Logo />
		<div class="mt-8 flex flex-col gap-2 overflow-y-auto">
			{#each NAV_LINKS as link}
				<a
					href={link.link}
					onclick={() => (open = false)}
					class={cn(
						"text-sgreen flex items-center gap-2 rounded-lg border-2 p-3 px-4",
						TRANSITION_COLORS,
						"border-transparent hover:border-brand-300 hover:bg-brand-100",
					)}
				>
					<Icon icon={link.icon} cls="h-5 w-5" />
					<span>{link.name}</span>
				</a>
			{/each}
		</div>
	</SheetContent>
</Sheet>
