---
// Forward `size` only when explicitly provided.
import Progress from './Progress.astro'
import type { ProgressSize } from './Progress.astro'

interface Props {
  label: string
  description?: string
  value?: number
  color?: string
  size?: ProgressSize | undefined
  class?: string
}

const { label, description, value, color, size, class: className } = Astro.props
---

<div class:list={[className]}>
  <div class="d-flex mb-1 align-items-center lh-1">
    <div class="fs-5 fw-semibold m-0">{label}</div>
    {description && <div class="fs-6 text-secondary ms-2">{description}</div>}
    <span class="ms-auto fs-6 strong">{value}%</span>
  </div>
  <Progress size={size} value={value} color={color} />
</div>