<template>
  <div
    class="progress"
    role="progressbar"
    :aria-valuenow="modelValue"
    aria-valuemin="0"
    aria-valuemax="100"
    :style="{ height: thickness + 'px' }"
  >
    <div
      class="progress-bar"
      :class="{ 'progress-bar-striped': striped, 'progress-bar-animated': animated }"
      v-bind="$attrs"
      :style="{ width: modelValue + '%' }"
    >
      <span v-if="!!label">{{ label }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({ inheritAttrs: false });
defineProps({
  modelValue: {
    type: Number,
    required: true,
  },
  thickness: {
    type: Number,
    default: 15,
  },
  label: String,
  striped: Boolean,
  animated: Boolean,
});
</script>
