<template>
  <div class="brand">
    <ui-title>{{ brand.name }}</ui-title>
    <div class="brand__categories">
      <cards-category
          v-for="category in brand.categories"
          :key="category.uuid"
          :category="category"
      />
    </div>
  </div>
</template>

<script setup>
import {useBrandByUuid} from "~/composables/brands";

const route = useRoute()

const slug = computed(() => route.params.uuid)

const { brand } = await useBrandByUuid(slug.value);

// TODO: add product by this brand
</script>

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