<template>
  <div class="brands">
    <nuxt-marquee
        class="brand__marquee"
        id="marquee-slider"
        :speed="50"
        :pauseOnHover="true"
    >
      <nuxt-link-locale
          v-for="brand in brands"
          :key="brand.node.uuid"
          :to="`/brand/${brand.node.slug}`"
      >
      <div
          class="brands__item"

      >
          <nuxt-img
              densities="x1"
              :src="brand.node.smallLogo"
              :alt="brand.node.name"
              loading="lazy"
              class="brands__item-image"
          />
      </div>
      </nuxt-link-locale>
    </nuxt-marquee>
  </div>
</template>

<script setup lang="ts">
import type {IBrand} from "~/types";

defineProps<{
  brands: { node: IBrand }[]
}>()
</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>