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

	type NavIconName = 'accounts' | 'calendar' | 'history' | 'invoices';
	type NavItem = { label: string; href: string; icon: NavIconName; color: string };

	const navItems: NavItem[] = [
		{ label: 'Accounts', href: '/customer/accounts', icon: 'accounts', color: 'primary' },
		{ label: 'Schedule', href: '/customer/schedule', icon: 'calendar', color: 'secondary' },
		{ label: 'History', href: '/customer/history', icon: 'history', color: 'accent' },
		{ label: 'Invoices', href: '/customer/invoices', icon: 'invoices', color: 'accent2' }
	];

	function isActive(href: string): boolean {
		if (href === '/customer') {
			return $page.url.pathname === '/customer';
		}
		return $page.url.pathname.startsWith(href);
	}

	function getActiveColor(color: string): string {
		return `text-${color}-600 dark:text-${color}-400`;
	}
</script>

<nav class="pb-safe fixed inset-x-0 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 rounded-lg px-3 py-1.5 transition-all duration-200 {active
					? getActiveColor(item.color)
					: 'text-theme-muted hover:text-theme-secondary'}"
				aria-current={active ? 'page' : undefined}
			>
				<NavIcon name={item.icon} class="h-5 w-5 sm:h-6 sm:w-6" />
				<span class="mt-0.5 text-[10px] font-semibold sm:text-xs">{item.label}</span>
			</a>
		{/each}
	</div>
</nav>
