<template>
  <div class="h-2 w-full bg-[#0f0816] border border-[#4a3b5e]">
    <div 
      class="h-full transition-all duration-500" 
      :style="{ width: `${Math.min(100, Math.max(0, progress))}%`, backgroundColor: color }" 
    />
  </div>
</template>

<script setup lang="ts">
interface Props {
  progress: number;
  color?: string;
}

withDefaults(defineProps<Props>(), {
  color: '#9fd75b'
});
</script>
