<template>
  <NuxtLink
    class="nav-item"
    :class="{
      'nav-item--active': isActive,
    }"
    :to="to"
  >
    <slot name="icon">
      <Component
        :is="resolveComponent(`ui-icon-${icon}`)"
        class="nav-item__icon"
      />
    </slot>
    <span class="nav-item__title">
      {{ title }}
    </span>
  </NuxtLink>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { UiIcon } from '#build/types/ui/icons'

interface Props {
  to: string
  icon: UiIcon
  title: string
  matcher?: () => boolean
}

const props = defineProps<Props>()

const isActive = computed(() => (props.matcher ? props.matcher() : false))
</script>

<style lang="scss">
.nav-item {
  --link-color: #{$clr-white};

  @include txt-i-sb;

  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: var(--link-color);

  transition: color 0.2s ease-out;

  &:hover {
    --link-color: #{$clr-grey-500};
  }

  &--active,
  &:active {
    --link-color: #{$clr-cyan-300} !important;
  }

  &__icon {
    margin-bottom: 5px;
    position: relative;
  }

  &__notification-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    top: -8px;
    right: -24px;
    background: $clr-white;
    color: $clr-white;
  }
}
</style>
