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

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

const { value, color = 'primary-lt', class: className, text, flag, 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">
        {flag && <Flag flag={flag} class="me-2" size="xs" />}
        {text}
      </div>
    )
  }
  {showValue && <div class="progressbg-value">{percentage}%</div>}
</div>