<script setup lang="ts">
import { computed, type Component } from 'vue'
import { RouterLink, useRoute } from 'vue-router'

const props = defineProps<{
  icon: Component
  label: string
  route?: string
  count?: string
  active?: boolean
}>()

const currentRoute = useRoute()

const isActive = computed(() => {
  if (props.route && currentRoute.path === props.route) return true
  return Boolean(props.active)
})

</script>

<template>
  <component
    :is="props.route ? RouterLink : 'button'"
    :to="props.route || undefined"
    :type="props.route ? undefined : 'button'"
    :class="['nav-item', { active: isActive }]"
    :aria-current="isActive ? 'page' : undefined"
  >
    <!-- Icon -->
    <span class="nav-icon">
      <component :is="icon" aria-hidden="true" />
    </span>

    <!-- Label -->
    <span class="nav-label">{{ label }}</span>

    <!-- Count badge -->
    <span v-if="count !== undefined" class="count">{{ count }}</span>
  </component>
</template>

<style scoped>
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--tx-2);
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: background .16s, color .16s;
  text-decoration: none;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  background: color-mix(in srgb, var(--a-mid) 8%, transparent);
  color: var(--tx);
}

.nav-item.active {
  color: var(--tx-on-accent);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--a-mid) 22%, transparent),
    color-mix(in srgb, var(--a-mid) 4%, transparent)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-mid) 25%, transparent);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 3px;
  background: var(--grad);
  box-shadow: var(--glow-purple);
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  opacity: .85;
}

.nav-icon :deep(svg) {
  width: 17px;
  height: 17px;
}

.nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--a-mid) 16%, transparent);
  color: var(--tx);
  line-height: 1.4;
  flex-shrink: 0;
}
</style>
