<script setup>
import { RouterLink } from 'vue-router'
import { useProjects } from '../composables/useProjects.js'

const { projects } = useProjects()
</script>

<template>
  <nav class="tab-nav">
    <div class="container tab-nav__inner">
      <RouterLink
        v-for="p in projects"
        :key="p.id"
        :to="`/${p.id}`"
        class="tab-nav__item"
        active-class="is-active"
      >
        {{ $t(p.tabKey) }}
      </RouterLink>
    </div>
  </nav>
</template>

<style scoped>
.tab-nav {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.tab-nav__inner {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-nav__inner::-webkit-scrollbar {
  display: none;
}
.tab-nav__item {
  position: relative;
  padding: var(--space-md) var(--space-md);
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--transition);
}
.tab-nav__item:hover {
  color: var(--text-primary);
}
.tab-nav__item.is-active {
  color: var(--accent);
}
.tab-nav__item.is-active::after {
  content: '';
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
</style>
