<template>
  <div class="flex items-center gap-3">
    <div
      :class="'h-1 w-full overflow-hidden rounded-full bg-gray-200 ' + customClasses"
      role="progressbar"
      :aria-valuemin="0"
      :aria-valuemax="max"
      :aria-valuenow="percentage"
      :aria-label="ariaLabel"
    >
      <div
        class="h-full origin-left rounded-full transition-transform duration-300"
        :class="fillColorClass"
        :style="{ transform: 'scaleX(' + (percentage / max) + ')' }"
      />
    </div>

    <span class="text-sm text-gray-500">
      {{ percentage + "%" }}
    </span>
  </div>
</template>

<script>
export default {
  name: "CLinearProgressBar",
  props: {
    max: { type: Number, default: 100 },
    ariaLabel: { type: String, default: "Progress" },
    fillColorClass: { type: String, default: "bg-gray-900" },
    customClasses: { type: String, default: "" },
    percentage: { type: Number, default: 0 },
  },
};
</script>
