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>
  )
}