<template>
  <div class="flex gap-24">
    <div class="price-container">
      <div class="slider" v-html="duplicatedContent">

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
let res = "<span class=\"text-base sm:text-lg font-bold\">CZK price (to EUR). Kč 25,1720<span class=\"text-accent-green-light dark:text-accent-green-dark\"> Kč 0,0180 (0.07%) </span></span><span class=\"text-base sm:text-lg font-bold\">Gold price on market. 2 929,7250 €<span class=\"text-[#B72D2D]\"> -6,9560 € (-0.24%) </span></span><span class=\"text-base sm:text-lg font-bold\">Silver price on market. 31,5280 €<span class=\"text-accent-green-light dark:text-accent-green-dark\"> 0,1690 € (0.54%) </span></span><span class=\"text-base sm:text-lg font-bold\">PLN price (to EUR). zł 4,2660<span class=\"text-[#B72D2D]\"> zł -0,0050 (-0.12%) </span></span>"
const productStore = useProductStore()
const activeElement = ref(1);
productStore.getModules()

// Computed property to duplicate the content
const duplicatedContent = computed(() => {
  const originalContent = res || '';
  return originalContent + originalContent + originalContent + originalContent;
});


const changeActive = (item: number) => {
  activeElement.value = item;
};
</script>


<style scoped>
.price-container {
  /* display: flex; */
  overflow: hidden;
}

.slider {
  display: flex;
  gap: 64px;
  animation: slidein 40s linear infinite;
  white-space: nowrap;
}

.logos {
  display: flex;
  gap: 64px;
  width: 100%;
  /* display: inline-block; */
  margin: 0px 0;
}

.fas {
  height: 50%;
  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media (min-width: 900px) {
  .slider {
    animation: slidein 80s linear infinite;
  }
}
</style>
