<script setup>
import { motion, useSpring } from "motion-v"
import { onMounted, onUnmounted } from "vue"

const progress = useSpring(0)

// Mock loading progress
let interval
onMounted(() => {
  interval = setInterval(() => {
    const newProgress = progress.get() + Math.random() * 0.2

    if (newProgress >= 1) {
      clearInterval(interval)
    }

    progress.set(newProgress)
  }, 500)
})

onUnmounted(() => {
  clearInterval(interval)
})
</script>

<template>
  <div class="container">
    <div class="progress-container">
      <motion.div
        class="progress-bar"
        :style="{ scaleX: progress }"
      />
    </div>
  </div>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f5f5f5;
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: 20px;
}

.progress-container {
  width: 100%;
  max-width: 300px;
  height: 10px;
  background-color: var(--divider);
  border-radius: 20px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 400px;
  background-color: #ff0088;
  border-radius: 20px;
  will-change: transform;
  transform-origin: 0% 50%;
}
</style>