<template>
  <div
    class="relative h-2 w-full overflow-hidden rounded-full bg-secondary"
    role="progressbar"
    :aria-valuenow="modelValue"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    <div
      class="h-full bg-primary transition-all duration-300 ease-in-out"
      :style="{ width: `${modelValue}%` }"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  modelValue?: number
  value?: number
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: 0,
  value: 0
})

// Support both v-model and value prop
const progressValue = computed(() => props.modelValue || props.value)
</script>
