<template>
  <div class="brands">
    <div class="container">
      <div class="brands__wrapper">
        <vue-marquee-slider
            id="marquee-slider"
            :speed="40000"
            :paused="isMarqueePaused"
            @mouseenter="isMarqueePaused = true"
            @mouseleave="isMarqueePaused = false"
        >
          <div
              class="brands__item"
              v-for="brand in brands"
              :key="brand.node.uuid"
          >
            <p>{{ brand.node.name }}</p>
          </div>
        </vue-marquee-slider>
      </div>
    </div>
  </div>
</template>

<script setup>
import { VueMarqueeSlider } from 'vue3-marquee-slider';
import '../../../node_modules/vue3-marquee-slider/dist/style.css'
import {onMounted, ref} from "vue";
import {useBrands} from "@/composables/brands/index.js";

const isMarqueePaused = ref(false)

const { brands, loading, getBrands } = useBrands();

onMounted( async () => {
  await getBrands()
})
</script>

<style lang="scss" scoped>
.brands {
  &__item {
    margin-right: 20px;
    flex-shrink: 0;

  }
}
</style>