import styles from './ProgressBar.module.css'

type ProgressBarVariant = 'primary' | 'success' | 'warning' | 'error' | 'running'
type ProgressBarSize = 'sm' | 'md'

interface ProgressBarProps {
  value?: number
  variant?: ProgressBarVariant
  size?: ProgressBarSize
  indeterminate?: boolean
  label?: string
  className?: string
}

export function ProgressBar({
  value = 0,
  variant = 'primary',
  size = 'md',
  indeterminate = false,
  label,
  className,
}: ProgressBarProps) {
  const clampedValue = Math.min(100, Math.max(0, value))

  const trackClasses = [
    styles.track,
    styles[size],
    className ?? '',
  ].filter(Boolean).join(' ')

  const fillClasses = [
    styles.fill,
    styles[variant],
    indeterminate ? styles.indeterminate : '',
  ].filter(Boolean).join(' ')

  const ariaProps = indeterminate
    ? { 'aria-valuenow': undefined }
    : { 'aria-valuenow': clampedValue }

  return (
    <div className={styles.wrapper}>
      {label && (
        <span className={styles.label}>{label}</span>
      )}
      <div
        className={trackClasses}
        role="progressbar"
        aria-valuemin={0}
        aria-valuemax={100}
        {...ariaProps}
      >
        <div
          className={fillClasses}
          style={indeterminate ? undefined : { width: `${clampedValue}%` }}
        />
      </div>
    </div>
  )
}
