<script lang="ts">
	import { page } from '$app/state';

	type LaporanMenuId = 'keuangan' | 'penjualan' | 'catatan' | 'hutang-piutang';

	interface MenuItem {
		id: LaporanMenuId;
		label: string;
		shortLabel: string;
		href: string;
	}

	const items: MenuItem[] = [
		{ id: 'keuangan', label: 'Keuangan', shortLabel: 'Keuangan', href: '/laporan' },
		{ id: 'penjualan', label: 'Penjualan', shortLabel: 'Penjualan', href: '/laporan/penjualan' },
		{ id: 'catatan', label: 'Catatan Harian', shortLabel: 'Catatan', href: '/laporan/catatan' },
		{
			id: 'hutang-piutang',
			label: 'Hutang & Piutang',
			shortLabel: 'Hutang',
			href: '/laporan/hutang-piutang'
		}
	];

	function isActive(item: MenuItem): boolean {
		const pathname = page.url.pathname;
		if (item.id === 'keuangan') return pathname === '/laporan';
		return pathname === item.href || pathname.startsWith(`${item.href}/`);
	}
</script>

<nav class="flex gap-2 overflow-x-auto pb-1" aria-label="Menu laporan">
	{#each items as item}
		<a
			href={item.href}
			class="btn btn-sm shrink-0 rounded-full {isActive(item)
				? 'border-0 bg-indigo-600 text-white'
				: 'btn-ghost bg-base-100'}"
		>
			<span class="hidden sm:inline">{item.label}</span>
			<span class="sm:hidden">{item.shortLabel}</span>
		</a>
	{/each}
</nav>
