<template>
  <div class="catalog">
    <ui-title>{{ t('catalog.title') }}</ui-title>
    <div class="container">
      <div class="catalog__wrapper">
        <cards-category
            v-for="category in categories"
            :key="category.node.uuid"
            :category="category.node"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const {t} = useI18n()
const categoryStore = useCategoryStore()

useHead({
  title: t('breadcrumbs.catalog'),
})

const categories = computed(() => categoryStore.categories)
</script>

<style scoped lang="scss">
.catalog {
  &__wrapper {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 275px);
    align-items: center;
    justify-content: center;
    gap: 50px;
  }
}
</style>