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

<script setup lang="ts">
const 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()
productStore.getModules()

// Computed property to duplicate the content
const duplicatedContent = computed(() => {
  const originalContent = res || ''
  return originalContent + originalContent + originalContent + originalContent
})
</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>
