<template>
  <nav v-if="items.length > 0" class="sticky top-16 z-30 bg-base-100 border-b border-base-300">
    <div class="flex items-center gap-1 py-2 px-4 lg:px-6 overflow-x-auto">
      <!-- Collapse button (chevron up) -->
      <button
        v-if="showCollapseButton"
        class="btn btn-ghost btn-xs btn-circle mr-1 flex-shrink-0"
        @click="emit('collapse')"
      >
        <Icon name="lucide:chevron-up" size="16" />
      </button>

      <NuxtLink
        v-for="item in items"
        :key="item.path"
        :to="localePath(item.path)"
        class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap text-base-content/70 hover:text-base-content hover:bg-base-200"
        :class="{ 'text-primary bg-primary/10': isActive(item.path) }"
      >
        {{ item.label }}
      </NuxtLink>
    </div>
  </nav>
</template>

<script setup lang="ts">
const props = defineProps<{
  section: 'catalog' | 'orders' | 'seller' | 'settings'
  showCollapseButton?: boolean
}>()

const emit = defineEmits<{
  collapse: []
}>()

const localePath = useLocalePath()
const route = useRoute()
const { t } = useI18n()

const sectionItems = computed(() => ({
  catalog: [
    { label: 'Предложения', path: '/catalog/offers' },
    { label: t('cabinetNav.suppliers'), path: '/catalog/suppliers' },
    { label: t('cabinetNav.hubs'), path: '/catalog/hubs' },
  ],
  orders: [
    { label: t('cabinetNav.orders'), path: '/clientarea/orders' },
    { label: t('cabinetNav.addresses'), path: '/clientarea/addresses' },
    { label: t('cabinetNav.billing'), path: '/clientarea/billing' },
  ],
  seller: [
    { label: t('cabinetNav.myOffers'), path: '/clientarea/offers' },
  ],
  settings: [
    { label: t('cabinetNav.profile'), path: '/clientarea/profile' },
    { label: t('cabinetNav.team'), path: '/clientarea/team' },
  ],
}))

const items = computed(() => sectionItems.value[props.section] || [])

const isActive = (path: string) => {
  return route.path === localePath(path) || route.path.startsWith(localePath(path) + '/')
}
</script>

