<script setup lang="ts">
defineProps<{
  value: number
  max?: number
  label?: string
  color?: string
  text?: string
}>()
</script>

<template>
  <div class="progress-wrap">
    <div v-if="label" class="progress-label">{{ label }}</div>
    <div class="progress-bar">
      <div
        class="progress-fill"
        :style="{
          width: `${Math.max(0, Math.min(100, (value / (max && max > 0 ? max : 100)) * 100))}%`,
          background: color ?? 'var(--gradient-progress-success)',
        }"
      />
    </div>
    <div class="progress-text">{{ text ?? `${value} / ${max ?? 100}` }}</div>
  </div>
</template>

<style scoped>
.progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.progress-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.progress-bar {
  height: 8px;
  background: var(--color-black-a08);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
  position: relative;
}
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--color-white-a40);
  border-radius: 4px 4px 0 0;
}
.progress-text {
  font-size: 11px;
  color: var(--color-text-secondary);
}
</style>
