<template>
	<NuxtLink
		:to="path"
		:title="ariaLabel"
		:aria-label="ariaLabel"
		:aria-checked="isActive"
		:class="{
			'border-black bg-white': isActive,
			'border-transparent cursor-pointer bg-gray-100 opacity-80 hover:opacity-100 hover:border-gray-400 pointer': !isActive,
			'opacity-30 cursor-not-allowed pointer-events-none': ariaDisabled
		}"
		class="flex flex-col items-center gap-y-4 rounded-md border-2 border-spacing-2 pt-2 pb-2 px-2 transition-all"
	>
		<div v-if="$slots.default" class="w-16 h-16 bg-transparent overflow-hidden">
			<slot></slot>
		</div>
		<div
			class="text-sm text-gray-800 pointer-events-none"
			:class="{
				'font-semibold': isActive
			}"
		>
			{{ label }}
		</div>
	</NuxtLink>
</template>

<script setup lang="ts">
defineProps<{
	label: string;
	path: string;
	isActive?: boolean;
	ariaLabel?: string;
	ariaDisabled?: boolean;
}>();
</script>
