<script setup lang="ts">
/**
 * Sous-nav du dashboard admin : 4 onglets visuels en haut de chaque page /admin/*.
 * On reste dans AppLayout (sidebar principale visible), c'est seulement une
 * convention de styling pour signaler qu'on est en "mode admin".
 */
import { RouterLink } from 'vue-router'

const items = [
  { to: { name: 'admin-overview' },   label: "Vue d'ensemble" },
  { to: { name: 'admin-projects' },   label: 'Projets' },
  { to: { name: 'admin-members' },    label: 'Membres' },
  { to: { name: 'admin-categories' }, label: 'Catégories' },
]
</script>

<template>
  <div class="border-b border-donut-border">
    <nav class="flex items-center gap-1 -mb-px">
      <RouterLink
        v-for="it in items" :key="it.to.name"
        :to="it.to"
        custom
        v-slot="{ href, navigate, isActive }"
      >
        <a
          :href="href"
          @click="navigate"
          :class="[
            'inline-flex items-center px-4 py-2.5 text-sm font-medium border-b-2 transition-colors',
            isActive
              ? 'border-donut-text text-donut-text'
              : 'border-transparent text-donut-muted hover:text-donut-text',
          ]"
        >
          {{ it.label }}
        </a>
      </RouterLink>
    </nav>
  </div>
</template>
