import type { HTMLAttributes } from 'react'
import { cn } from '../../utils/cn'

type ProgressProps = HTMLAttributes<HTMLDivElement> & {
  value?: number
  max?: number
  indeterminate?: boolean
  label?: string
}

export function Progress({
  value = 0,
  max = 100,
  indeterminate = false,
  label,
  className,
  ...props
}: ProgressProps) {
  const percentage = Math.min(Math.max(Math.round((value / max) * 100), 0), 100)

  return (
    <div className={cn('stack-xs', className)} {...props}>
      {(label || !indeterminate) && (
        <div className="flex-between" style={{ fontSize: 'var(--text-xs)', color: 'var(--muted-foreground)' }}>
          {label && <span>{label}</span>}
          {!indeterminate && <span style={{ fontFamily: 'var(--font-mono)' }}>{percentage}%</span>}
        </div>
      )}
      <div className="progress-container">
        <div
          className={cn('progress-fill', indeterminate && 'progress-indeterminate')}
          style={!indeterminate ? { width: `${percentage}%` } : undefined}
        />
      </div>
    </div>
  )
}