<script>
	import { BottomNav, BottomNavItem, Button, ButtonGroup } from 'flowbite-svelte';
	import {
		HomeSolid,
		ProfileCardOutline,
		ImageOutline,
		MobilePhoneOutline
	} from 'flowbite-svelte-icons';
	import { writable } from 'svelte/store';

	let activeBtn = writable('');

	function handleNavItemClick(btnName) {
		activeBtn.set(btnName);
	}
</script>

{#if $activeBtn === 'projects'}
	<ButtonGroup class="fixed md:hidden bottom-20 flex justify-center w-full">
		<Button href="/projects/svelte" outline class="flex-col backdrop-blur ">Svelte</Button>
		<Button href="/projects/nextjs" outline class="flex-col backdrop-blur">Next.js</Button>
		<Button href="/projects/homelab" outline class="flex-col backdrop-blur">Homelab</Button>
	</ButtonGroup>
{/if}

<BottomNav
	position="fixed"
	classInner="grid-cols-4"
	outerClass="md:hidden w-full z-50 border-gray-200 dark:bg-slate-900 dark:border-gray-600"
>
	<BottomNavItem btnName="home" href="/" on:click={() => handleNavItemClick('home')}>
		<HomeSolid
			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
		/>
	</BottomNavItem>
	<BottomNavItem btnName="whoami" href="/about" on:click={() => handleNavItemClick('whoami')}>
		<ProfileCardOutline
			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
		/>
	</BottomNavItem>
	<BottomNavItem btnName="projects" on:click={() => handleNavItemClick('projects')}>
		<ImageOutline
			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
		/>
	</BottomNavItem>
	<BottomNavItem btnName="contact" href="/contact" on:click={() => handleNavItemClick('contact')}>
		<MobilePhoneOutline
			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
		/>
	</BottomNavItem>
</BottomNav>
