import { ProgressBar } from 'react-aria-components'
import { cx } from 'class-variance-authority'
import styles from './progress.module.css'
import { ProgressProps } from './types'

export function Progress({
  value,
  minValue = 0,
  maxValue = 100,
  'aria-label': ariaLabel,
  className,
}: ProgressProps) {
  return (
    <ProgressBar
      value={value}
      minValue={minValue}
      maxValue={maxValue}
      aria-label={ariaLabel}
      className={cx(styles.progress, className)}
    >
      {({ percentage }) => (
        <>
          <div className={styles.track}>
            <div className={styles.fill} style={{ width: `${percentage}%` }} />
          </div>
        </>
      )}
    </ProgressBar>
  )
}