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

<script setup lang="ts">
import {usePageTitle} from "@composables/utils";

const {t} = useI18n();
const categoryStore = useCategoryStore();

const categories = computed(() => categoryStore.categories);

const { setPageTitle } = usePageTitle();

setPageTitle(t('breadcrumbs.catalog'));
</script>

<style lang="scss" scoped>
.catalog {
  &__main {
    background-color: $main;
    padding-block: 70px;
    border-top: 1px solid $border;

    &-wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 24px;
    }
  }
}
</style>