<script setup lang="ts">
/**
 * Props-driven progress bar display.
 *
 * Wraps the shadcn-vue Progress primitive. The numeric `progress`
 * prop (0-100) is clamped before being passed to the underlying
 * indicator.
 */
import { computed } from "vue"
import { Progress } from "@/components/ui/progress"

export interface ProgressBarDisplayProps {
  progress?: number
  label?: string
  hideLabel?: boolean
  classList?: string[] | string
}

const props = withDefaults(defineProps<ProgressBarDisplayProps>(), {
  progress: 0,
})

function clamp(n: number): number {
  if (n < 0) {
    return 0
  }
  if (n > 100) {
    return 100
  }
  return n
}

const value = computed<number>(() => {
  if (typeof props.progress !== "number" || !Number.isFinite(props.progress)) {
    return 0
  }
  return clamp(props.progress)
})

const rootClass = computed<string>(() => {
  const cl = props.classList
  if (!cl) {
    return ""
  }
  return Array.isArray(cl) ? cl.join(" ") : cl
})
</script>

<template>
  <div
    class="flex flex-col gap-1.5"
    :class="rootClass"
    data-testid="progress-bar-display"
  >
    <div
      v-if="(label && !hideLabel) || !hideLabel"
      class="flex items-center justify-between text-sm"
    >
      <span v-if="label && !hideLabel">{{ label }}</span>
      <span
        class="text-muted-foreground"
        data-testid="progress-bar-value"
      >{{ value }}%</span>
    </div>
    <Progress
      :value="value"
      :max="100"
    />
  </div>
</template>
