<template>
  <nav v-if="items.length > 0" class="mx-auto mt-2 w-full max-w-[2200px] px-3 md:px-4">
    <div class="flex items-center gap-1 overflow-x-auto rounded-[24px] border border-[#e2d8ca] bg-[#efe6d8]/92 px-3 py-2 shadow-[0_14px_34px_rgba(47,36,24,0.08)] backdrop-blur">
      <NuxtLink
        v-for="item in items"
        :key="item.path"
        :to="localePath(item.path)"
        class="rounded-full px-4 py-2 text-sm font-bold whitespace-nowrap transition-colors text-[#5f4b33] hover:bg-[#f8f3ec]"
        :class="{ 'bg-[#2f2418] text-white shadow-[0_10px_24px_rgba(47,36,24,0.16)]': isActive(item.path) }"
      >
        {{ item.label }}
      </NuxtLink>
    </div>
  </nav>
</template>

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

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

const sectionItems = computed(() => ({
  catalog: [
    { label: 'Предложения', path: '/catalog?select=product' },
    { label: t('cabinetNav.suppliers'), path: '/catalog?select=supplier' },
    { label: t('cabinetNav.hubs'), path: '/catalog?select=hub' },
  ],
  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>
