<template>
  <div class="progress-track">
    <div
      class="progress-fill"
      :style="{ width: `${Math.min(100, Math.max(0, percent))}%` }"
    ></div>
  </div>
</template>

<script setup>
defineProps({ percent: { type: Number, default: 0 } })
</script>

<style scoped>
.progress-track {
  width: 100%;
  height: 8px;
  background: #0f172a;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4f46e5, #818cf8);
  border-radius: 999px;
  transition: width 0.5s ease;
}
</style>
