<script lang="ts">
	import { page } from '$app/state';
	import NavIcon from '$lib/components/icons/NavIcon.svelte';

	type NavIconName = 'customers' | 'accounts' | 'services' | 'projects' | 'scopes' | 'reports';

	const navItems: { label: string; href: string; icon: NavIconName; activeColor: string }[] = [
		{
			label: 'Accounts',
			href: '/team/accounts',
			icon: 'accounts',
			activeColor: 'text-primary-600 dark:text-primary-400'
		},
		{
			label: 'Services',
			href: '/team/services',
			icon: 'services',
			activeColor: 'text-secondary-600 dark:text-secondary-400'
		},
		{
			label: 'Projects',
			href: '/team/projects',
			icon: 'projects',
			activeColor: 'text-accent-600 dark:text-accent-400'
		},
		{
			label: 'Reports',
			href: '/team/reports',
			icon: 'reports',
			activeColor: 'text-accent2-600 dark:text-accent2-400'
		}
	];

	function isActive(href: string): boolean {
		if (href === '/team') {
			return page.url.pathname === '/team';
		}
		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
	}
</script>

<nav class="sticky bottom-0 z-30 border-t border-theme bg-theme-secondary">
	<div class="mx-auto flex h-16 max-w-lg items-center justify-around px-2">
		{#each navItems as item (item.href)}
			{@const active = isActive(item.href)}
			<a
				href={item.href}
				class="flex flex-col items-center justify-center gap-0.5 rounded-lg px-2 py-1.5 transition-all duration-200 {active
					? item.activeColor
					: 'text-theme-muted hover:text-theme-secondary'}"
				aria-current={active ? 'page' : undefined}
			>
				<NavIcon name={item.icon} class="h-5 w-5" />
				<span class="text-[10px] font-semibold">{item.label}</span>
			</a>
		{/each}
	</div>
</nav>
