<script lang="ts">
	import { page } from '$app/state';
	import OutlineIcon from '$lib/components/ui/OutlineIcon.svelte';
	import {
		filterMemberNavItems,
		isMemberNavActive,
		MEMBER_BOTTOM_NAV_ITEMS
	} from '$lib/constants/member-nav';

	const navItems = $derived(
		filterMemberNavItems(MEMBER_BOTTOM_NAV_ITEMS, { pakaiStok: page.data.pakaiStok })
	);

	function isActive(href: string): boolean {
		return isMemberNavActive(page.url.pathname, href);
	}
</script>

<nav class="mobile-bottom-nav fixed bottom-0 left-0 right-0 z-50 lg:hidden" aria-label="Navigasi utama">
	<div
		class="mx-auto max-w-lg overflow-hidden rounded-t-[1.75rem] bg-gradient-to-br from-emerald-700 via-teal-700 to-cyan-800 px-1.5 pt-2.5 shadow-[0_-10px_40px_rgba(6,78,59,0.35)]"
		style="padding-bottom: max(0.5rem, env(safe-area-inset-bottom))"
	>
		<div class="flex items-center justify-around gap-0">
			{#each navItems as item}
				{@const active = isActive(item.href)}
				<a
					href={item.href}
					class="flex min-w-0 flex-1 flex-col items-center gap-0.5 px-0.5 py-1 transition-transform active:scale-95"
					aria-current={active ? 'page' : undefined}
				>
					<div
						class="flex h-7 w-7 items-center justify-center transition-colors {active
							? 'text-white drop-shadow-sm'
							: 'text-white/75'}"
					>
						<OutlineIcon name={item.icon} size="sm" filled={active} />
					</div>
					<span
						class="max-w-full truncate text-center text-[8px] font-semibold leading-tight {active
							? 'text-white'
							: 'text-white/70'}"
					>
						{item.label}
					</span>
					{#if active}
						<span class="mt-0.5 h-1 w-1 rounded-full bg-yellow-300"></span>
					{:else}
						<span class="mt-0.5 h-1 w-1 rounded-full bg-transparent"></span>
					{/if}
				</a>
			{/each}
		</div>
	</div>
</nav>
