<script lang="ts">
	import { MenuIcon, XIcon } from 'lucide-svelte';
	import { _ } from 'svelte-i18n';
	import { locale, locales } from 'svelte-i18n';
	import HeaderButton from '$lib/components/uiElements/HeaderButton.svelte';
	export let items: {
		label: string;
		href: string;
		icon?: any;
	}[] = [];
	let menuOpen = false;

	const toggleMenu = () => {
		menuOpen = !menuOpen;
	};

	const setLanguage = (lang: string) => {
		locale.set(lang);
	};
</script>

<nav class="fixed top-0 left-0 z-10 w-full bg-pigment-green shadow shadow-green-800 dark:bg-forest-green dark:text-timberwolf text-gunmetal-950">
	<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
		<div class="flex h-16 items-center justify-between">
			<!-- Logo -->
			<div class="flex flex-shrink-0 items-center">
				<a href="/car_management/" class="text-xl font-bold">{$_('dashboard.title')}</a>
			</div>

			<!-- Desktop-Navigation: ab sm (min-width: 640px) sichtbar -->
			<div class="hidden items-center space-x-4 sm:flex">
				{#each items as item}
					<HeaderButton button={{ type: 'link', label: item.label, href: item.href, icon: item.icon }}	/>
				{/each}
				{#each $locales as l}
					<HeaderButton button={{ type: 'action', label: l, onClick: () => setLanguage(l) }} />
				{/each}
			</div>

			<!-- Burger-Button: nur auf xs (sm:hidden) anzeigen -->
			<button
				class="flex items-center rounded-md p-2 text-gunmetal-950 hover:bg-gray-100 focus:outline-none sm:hidden dark:text-gray-100 dark:hover:bg-gray-700"
				aria-label="Open main menu"
				on:click={toggleMenu}
			>
				{#if menuOpen}
					<XIcon class="h-6 w-6" />
				{:else}
					<MenuIcon class="h-6 w-6" />
				{/if}
			</button>
		</div>
	</div>

	<!-- Mobile-Navigation: nur wenn geöffnet und auf xs -->
	{#if menuOpen}
		<div
			class="border-t border-gray-200 bg-gunmetal text-timberwolf sm:hidden dark:border-gray-700 dark:bg-gunmetal"
		>
			<div class="space-y-1 px-2 pt-2 pb-3">
				{#each items as item}
					<a
						href={item.href}
						class="block rounded-md px-3 py-2 text-base font-medium text-timberwolf bg- hover:bg-gray-100 dark:hover:bg-gray-700"
						on:click={() => (menuOpen = false)}
					>
						{#if item.icon}
							<svelte:component this={item.icon} class="mr-2 inline-block h-5 w-5" />
						{/if}
						{$_(item.label)}
					</a>
				{/each}
			</div>
		</div>
	{/if}
</nav>
<div class="h-16"></div>
