<template>
  <RouterLink :to="to" custom v-slot="{ isActive, href, navigate }">
    <a
      v-bind="$attrs"
      :href="href"
      @click="navigate"
      class="flex flex-col items-center w-full sm:flex-row sm:items-center sm:w-auto gap-1 relative pt-4 pb-safe-or-4 sm:pb-4 sm:pt-safe-or-4"
    >
      <i
        :class="[
          'pi',
          `pi-${icon}`,
          'text-2xl sm:mr-2',
          isActive ? 'text-primary-700 dark:text-primary-300' : 'text-gray-700 dark:text-gray-300',
        ]"
      ></i>
      <span
        class="text-xs font-medium sm:text-base text-center max-w-25 sm:max-w-none"
        :class="{
          'text-primary-700 dark:text-primary-300': isActive,
          'text-gray-700 dark:text-gray-300': !isActive,
        }"
      >
        {{ label }}
      </span>
      <span
        v-if="unreadCount && unreadCount > 0"
        class="absolute top-0 -right-2.5 bg-red-500 dark:bg-red-600 text-white text-xs rounded-full px-1"
      >
        {{ unreadCount }}
      </span>
    </a>
  </RouterLink>
</template>

<script setup lang="ts">
import { type RouteLocationRaw } from 'vue-router'

defineProps<{
  readonly to: RouteLocationRaw | string
  readonly icon: string
  readonly label: string
  readonly unreadCount?: number
}>()
</script>
