<script lang="ts">
	import { LayoutDashboard, User, Calendar, CreditCard, Menu } from 'lucide-svelte';
	import type { MemberWithDues } from '$lib/types/database';

	interface Props {
		member: MemberWithDues | null;
		currentPath: string;
		onMenuOpen?: () => void;
	}

	let { member, currentPath, onMenuOpen }: Props = $props();

	const navItems = [
		{ href: '/dashboard', label: 'Home', icon: LayoutDashboard },
		{ href: '/events', label: 'Events', icon: Calendar },
		{ href: '/profile', label: 'Profile', icon: User },
		{ href: '/payments', label: 'Payments', icon: CreditCard }
	];

	function isActive(href: string) {
		if (href === '/dashboard') return currentPath === href;
		return currentPath.startsWith(href);
	}
</script>

<nav
	class="fixed bottom-0 left-0 right-0 z-50 border-t border-slate-200 bg-white/95 backdrop-blur-sm lg:hidden"
>
	<div class="flex items-center justify-around">
		{#each navItems as item}
			{@const Icon = item.icon}
			<a
				href={item.href}
				class="flex flex-1 flex-col items-center gap-1 py-3 text-sm font-medium transition-colors min-h-[56px] {isActive(
					item.href
				)
					? 'text-monaco-600 bg-monaco-50/50'
					: 'text-slate-500 hover:text-slate-900 active:bg-slate-100'}"
			>
				<Icon class="h-5 w-5 {isActive(item.href) ? 'text-monaco-600' : ''}" />
				<span>{item.label}</span>
			</a>
		{/each}
		<button
			onclick={onMenuOpen}
			class="flex flex-1 flex-col items-center gap-1 py-3 text-sm font-medium text-slate-500 hover:text-slate-900 active:bg-slate-100 min-h-[56px] transition-colors"
			aria-label="More menu"
		>
			<Menu class="h-5 w-5" />
			<span>More</span>
		</button>
	</div>
</nav>
