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

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

const props = defineProps<{
  brands: { node: IBrand }[];
}>();
</script>

<style lang="scss" scoped>
.brands {
  background-color: #e5e7eb;
  padding-block: 65px;

  &__item {
    transition: 0.2s;
    margin-right: 65px;
    color: #4b5563;
    font-family: "Playfair Display", sans-serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1.9px;

    @include hover {
      text-shadow: 0 0 10px #1a1a1a;
    }
  }
}
</style>