tabler/shared/ui/ProgressBg.astro

---
import Progress from './Progress.astro'
import { parsePercentage } from '@shared/lib/string-format'

interface Props {
  value?: number | string
  color?: string
  class?: string
  text?: string
  showValue?: boolean
}

const { value, color = 'primary-lt', class: className, text, showValue } = Astro.props

const percentage = parsePercentage(value)
---

<div class={`progressbg${className ? ` ${className}` : ''}`}>
  <Progress value={percentage} class="progressbg-progress" color={color} />
  {text && <div class="progressbg-text">{text}</div>}
  {showValue && <div class="progressbg-value">{percentage}%</div>}
</div>