<script setup>
import { computed } from 'vue'

const props = defineProps({
  variant: {
    type: String,
    default: 'contained',
    validator: v => ['contained', 'gradient'].includes(v),
  },
  color: {
    type: String,
    default: 'primary',
    validator: v => ['primary','secondary','info','success','warning','danger','error','light','dark'].includes(v),
  },
  value: {
    type: Number,
    required: true,
  },
})

const contained = {
  primary:   'bg-primary',
  secondary: 'bg-secondary',
  info:      'bg-info',
  success:   'bg-success',
  warning:   'bg-warning',
  danger:    'bg-danger',
  error:     'bg-danger',
  light:     'bg-light',
  dark:      'bg-dark',
}

const grad = {
  primary:   'bg-gradient-primary',
  secondary: 'bg-gradient-secondary',
  info:      'bg-gradient-info',
  success:   'bg-gradient-success',
  warning:   'bg-gradient-warning',
  danger:    'bg-gradient-danger',
  error:     'bg-gradient-danger',
  light:     'bg-gradient-light',
  dark:      'bg-gradient-dark',
}

const barClass = computed(() =>
  (props.variant === 'gradient' ? grad : contained)[props.color] ?? contained.primary
)

const pct = computed(() => Math.min(100, Math.max(0, props.value)))
</script>

<template>
  <div class="w-full overflow-hidden rounded-full bg-gray-200" style="height: 6px">
    <div
      :class="barClass"
      class="h-full rounded-full transition-all duration-500"
      role="progressbar"
      :style="{ width: `${pct}%` }"
      :aria-valuenow="pct"
      aria-valuemin="0"
      aria-valuemax="100"
    />
  </div>
</template>
