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

	export let routes: App.Route[];

	function isActive(route: string): boolean {
		if (route === '/') return page.url.pathname === route;

		return page.url.pathname.split('/')[1] === route.split('/')[1];
	}
</script>

<nav
	class="flex shrink-0 flex-row gap-2 bg-slate-100 not-landscape:justify-around not-landscape:overflow-x-auto not-landscape:px-2 landscape:flex-col landscape:overflow-y-auto landscape:py-2"
>
	{#each routes as route (route.href)}
		<a class="nav-button {isActive(route.href) ? 'active' : ''}" href={route.href}>
			<div class="p-1">
				<HoverIcon
					src={route.icon}
					class="text-sm uppercase"
					alt={route.label}
					size={32}
					black={!isActive(route.href)}
				/>
			</div>
			<div class="contour">
				{route.label}
			</div>
		</a>
	{/each}
</nav>

<style>
	@import '$src/app.css';

	.nav-button {
		@apply flex aspect-square shrink-0 flex-col items-center justify-center gap-0.5 p-2 text-slate-950 not-landscape:h-24 hover:bg-emerald-400 landscape:w-24;

		> .contour {
			@apply rounded-full px-1.5 py-0.5 text-center;
		}

		&.active {
			@apply bg-emerald-600;

			> .contour {
				@apply bg-slate-50;
			}
		}
	}
</style>
