<script setup lang="ts">
import type { NavItemDef } from '../../composables/icons'
import NavItem from './NavItem.vue'

defineProps<{
  label: string
  items: NavItemDef[]
}>()
</script>

<template>
  <div class="nav-group">
    <div class="nav-group-label">{{ label }}</div>
    <NavItem
      v-for="item in items"
      :key="item.label"
      :icon="item.icon"
      :label="item.label"
      :route="item.route"
      :count="item.count"
      :active="item.active"
    />
  </div>
</template>

<style scoped>
.nav-group-label {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tx-3);
  font-weight: 700;
  padding: 16px 10px 7px;
  font-family: 'Manrope', sans-serif;
}
</style>
