<script lang="ts">
	import { page } from '$app/stores';
	import * as m from '$lib/paraglide/messages';
	import { ShoppingCart, CheckSquare, FileText, Search } from 'lucide-svelte';

	const items = [
		{ href: '/lists',  label: () => m.nav_lists(),  icon: ShoppingCart },
		{ href: '/tasks',  label: () => m.nav_tasks(),  icon: CheckSquare },
		{ href: '/notes',  label: () => m.nav_notes(),  icon: FileText },
		{ href: '/search', label: () => m.nav_search(), icon: Search }
	];

	const activePath = $derived($page.url.pathname);

	function isActive(href: string): boolean {
		return activePath === href || activePath.startsWith(`${href}/`);
	}
</script>

<nav
	data-testid="bottom-tab-bar"
	class="md:hidden fixed inset-x-0 bottom-0 z-40 border-t border-black/5 bg-surface/80 backdrop-blur-xl pb-[env(safe-area-inset-bottom)] dark:border-white/5"
>
	<ul class="flex items-stretch justify-around">
		{#each items as { href, label, icon: Icon }}
			{@const active = isActive(href)}
			<li class="flex-1">
				<a
					{href}
					aria-current={active ? 'page' : undefined}
					aria-label={label()}
					class="flex h-14 flex-col items-center justify-center gap-0.5 text-xs transition-colors {active ? 'text-slate-900 dark:text-slate-50' : 'text-slate-400 dark:text-slate-500'}"
				>
					<Icon size={22} strokeWidth={1.5} />
					<span class="sr-only">{label()}</span>
				</a>
			</li>
		{/each}
	</ul>
</nav>
