<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { icons } from '../../composables/icons'

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

const router = useRouter()
const route = useRoute()

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

function navigate() {
  if (props.route) {
    router.push(props.route)
  }
}
</script>

<template>
  <button
    :class="['nav-item', { active: isActive }]"
    @click="navigate"
  >
    <!-- Icon -->
    <span class="nav-icon" v-html="icons[icon] || ''"></span>

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

    <!-- Count badge -->
    <span v-if="count !== undefined" class="count">{{ count }}</span>
  </button>
</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: rgba(124,108,255,.08);
  color: var(--tx);
}

.nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(124,108,255,.22), rgba(124,108,255,.04));
  box-shadow: inset 0 0 0 1px rgba(124,108,255,.25);
}

.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: rgba(124,108,255,.16);
  color: var(--tx);
  line-height: 1.4;
  flex-shrink: 0;
}
</style>
