<template>
    <NuxtLink
        :to="to"
        class="group/link relative flex items-center transition-colors hover:text-primary-500"
        :class="[linkClasses, isActive ? activeClass : '']"
    >
        <Icon :name="icon" :size="sub ? '20' : '24'" class="flex-shrink-0" />
        <span
            v-if="!collapsed"
            class="self-baseline whitespace-nowrap overflow-hidden transition-opacity duration-300"
            :class="sub ? 'text-sm' : 'text-md'"
        >
            {{ label }}
        </span>
        <div
            v-if="collapsed"
            class="pointer-events-none absolute left-full z-50 ml-2 rounded-md bg-neutral-800 px-2 py-1 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover/link:pointer-events-auto group-hover/link:opacity-100 whitespace-nowrap"
        >
            {{ label }}
        </div>
    </NuxtLink>
</template>

<script setup lang="ts">
const props = defineProps<{
    to: string
    icon: string
    label: string
    collapsed: boolean
    sub?: boolean
    exact?: boolean
}>()

const route = useRoute()

const isActive = computed(() => {
    if (props.exact) {
        return route.path === props.to
    }
    return route.path === props.to || route.path.startsWith(props.to + '/')
})

const activeClass = computed(() => {
    if (props.collapsed) {
        return '!text-primary-500 bg-primary-500/10'
    }
    return '!text-primary-500 bg-tertiary-500'
})

const linkClasses = computed(() => {
    if (props.collapsed) {
        return 'justify-center w-10 h-10 mx-auto my-1 p-2 rounded-lg text-neutral-600 hover:text-primary-500 hover:bg-primary-500/10'
    }
    if (props.sub) {
        return 'gap-3 px-4 py-2 pl-12 text-sm font-semibold text-neutral-700'
    }
    return 'gap-3 px-4 py-3 text-md font-semibold text-neutral-700'
})
</script>
