<template>
  <!-- RouterLink pour une route interne ; <a target=_blank> pour un lien externe (ex. Gitea). -->
  <component
    :is="href ? 'a' : RouterLink"
    :to="href ? undefined : to"
    :href="href"
    :target="href ? '_blank' : undefined"
    :rel="href ? 'noopener noreferrer' : undefined"
    :aria-current="!href && active ? 'page' : undefined"
    :class="orientation === 'col' ? colClass : rowClass"
  >
    <span class="relative">
      <component :is="icon" :size="orientation === 'col' ? 20 : 18" :stroke-width="1.75" />
      <span
        v-if="badge"
        class="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-500 px-1 text-[9px] font-semibold text-amber-950"
      >
        {{ badge }}
      </span>
    </span>
    <span :class="orientation === 'col' ? 'text-[10px]' : 'flex-1'">{{ label }}</span>
    <span
      v-if="badge && orientation === 'row'"
      class="rounded-full bg-amber-500/20 px-1.5 text-[11px] font-semibold text-amber-300"
    >
      {{ badge }}
    </span>
  </component>
</template>

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

const props = withDefaults(
  defineProps<{
    // `| undefined` requis par exactOptionalPropertyTypes : les items de nav passent `to`/`href`
    // potentiellement undefined (l'un ou l'autre selon route interne vs lien externe).
    to?: RouteLocationRaw | undefined;
    href?: string | undefined;
    icon: Component;
    label: string;
    badge?: number;
    active?: boolean;
    orientation?: 'row' | 'col';
  }>(),
  { orientation: 'row' },
);

const rowClass = computed(() => [
  'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/70',
  props.active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800/50 hover:text-zinc-200',
]);
const colClass = computed(() => [
  'flex flex-1 flex-col items-center gap-0.5 py-2 transition-colors focus-visible:outline-none',
  props.active ? 'text-emerald-400' : 'text-zinc-500 hover:text-zinc-300',
]);
</script>
