---
import type { ProgressProps } from './progress'

import { classNames } from '../../utils/classNames'

import styles from './progress.module.scss'

export type Props = ProgressProps

const {
    value,
    size,
    label,
    color,
    background,
    square,
    striped,
    stripeLight,
    stripeDark,
    indeterminate,
    className
} = Astro.props

const classes = [
    styles['w-progress'],
    size && styles[size],
    striped && styles.striped,
    square && styles.square,
    indeterminate && styles.indeterminate,
    className
]

const styleVariables = classNames([
    color && `--w-progress-color: ${color};`,
    background && `--w-progress-background: ${background};`,
    stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
    stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
])

const currentValue = indeterminate && !value ? 20 : value
---

<div class:list={classes} style={styleVariables}>
    <div class={styles.progress} style={`--w-progress-width: ${currentValue}%;`}>
        {label && `${currentValue}%`}
    </div>
</div>