<template>
  <SectionNavLinks
    :items="categoriesNavigation"
    theme="secondary"
  />
  <UiExpandRow
    :class="{'_from-sm': hideOnMobile}"
    :items="alphabetItems"
    class="category-nav__alphabet"
    alphabet
  >
    <UiChips
      v-for="(item, index) in alphabetItems"
      :key="`categories-chips-${index}`"
      :item="item"
      :class="{ '--all': item.value === '' }"
      is-link
      alphabet
    />
  </UiExpandRow>
</template>

<script setup lang="ts">
import { categoriesNavigation } from '../../lib';
import type { IChipsItem } from '../../types';

const props = defineProps<{
  items: IChipsItem[]
  hideOnMobile?: boolean
}>();

const { t } = useI18n();

const alphabetItems = computed<IChipsItem[]>(() => [
  {
    title: t('all'),
    value: '',
    prefix: 'categories/all',
  },
  ...(props.items || []),
]);
</script>

<style lang="scss">
.category-nav__alphabet {
  margin-top: 16px;
}
</style>
