<template>
  <div class="brands">
    <client-only>
      <NuxtMarquee
          class="brand__marquee"
          id="marquee-slider"
          :speed="50"
          :pauseOnHover="true"
      >
        <div
            class="brands__item"
            v-for="brand in brands"
            :key="brand.node.uuid"

        >
          <nuxt-link-locale
              :to="`/brand/${brand.node.uuid}`"
          >
            <nuxt-img
                densities="x1"
                :src="brand.node.smallLogo"
                :alt="brand.node.name"
                loading="lazy"
                class="brands__item-image"
            />
          </nuxt-link-locale>
        </div>
      </NuxtMarquee>
    </client-only>
  </div>
</template>

<script setup lang="ts">
import {useBrands} from "~/composables/brands";

const { brands } = await useBrands();
</script>

<style lang="scss" scoped>
.brands {
  &__item {
    margin: 10px;
    flex-shrink: 0;
    width: 135px;
    height: 70px;
    background-color: $white;
    border: 2px solid $accentDark;
    border-radius: $default_border_radius;
    padding: 10px;
    cursor: pointer;
    transition: 0.2s;

    @include hover {
      box-shadow: 0 0 10px 1px rgba($accentDark, 0.4);
    }

    &-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
</style>