<template>
	<NuxtLink
		:to="path"
		class="px-4 py-0.5 rounded-full font-medium text-lg text-black transition-all duration-200 flex flex-col justify-center hover:bg-gray-900 hover:text-white"
		active-class="!bg-gray-900 !text-white"
		aria-label="Navigation"
		:title="description ?? label"
	>
		{{ label }}
	</NuxtLink>
</template>

<script setup lang="ts">
defineProps<{
	path?: string;
	to?: string;
	label: string;
	description?: string;
	isDarkMode?: boolean;
}>();
</script>
