<script lang="ts">
	import type { SvelteComponent } from 'svelte';
	import { page } from '$app/stores';
	import {
		IconBell,
		IconCalendarDays,
		IconChartPie,
		IconCog6Tooth,
		IconCpuChip,
		IconExclamationTriangle,
		IconHome,
		IconMap,
		IconUser
	} from './icons';

	// Define a type for navigation items
	type NavItem = {
		name: string;
		href: string;
		Icon: new (...args: any) => SvelteComponent;
	};

	// Initialize navigation items
	const navItems: NavItem[] = [
		{ name: 'Dashboard', href: '/', Icon: IconHome },
		{ name: 'Map and Zones', href: '/map', Icon: IconMap },
		{ name: 'Devices', href: '/devices', Icon: IconCpuChip },
		{ name: 'Fault', href: '/fault', Icon: IconExclamationTriangle },
		{ name: 'Notifications', href: '/notifications', Icon: IconBell },
		{ name: 'Schedule', href: '/schedule', Icon: IconCalendarDays },
		{ name: 'Admin', href: '/admin', Icon: IconUser },
		{ name: 'Reports', href: '/reports', Icon: IconChartPie },
		{ name: 'Settings', href: '/settings', Icon: IconCog6Tooth }
	];
	const activeClasses = 'bg-purple-950 text-purple-100';
	const inactiveClasses = 'text-purple-100 hover:text-white hover:bg-purple-950';
	const baseClasses = 'group flex gap-x-3 rounded-primary p-2 text-sm leading-6';
</script>

<div class="flex gap-4 h-16 shrink-0 items-center">
	<h3 class="text-purple-100 font-semibold text-xl">GB Lux</h3>
</div>
<nav class="flex flex-1 flex-col">
	<ul role="list" class="flex flex-1 flex-col -mx-2 space-y-1">
		{#each navItems as { name, href, Icon }}
			<li>
				<a
					{href}
					class="{baseClasses} {$page.url.pathname === href ? activeClasses : inactiveClasses}"
				>
					<svelte:component this={Icon} />
					{name}
				</a>
			</li>
		{/each}
	</ul>
</nav>
