---
// Forward `size` only when explicitly provided.
import Progress from './Progress.astro'

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

const { label = 'Label', description, value, color = 'blue', 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>