import { ReactNode } from 'react'

export interface ProgressBarRenderProps {
  (props: ProgressBarProps): ReactNode
}

export interface ProgressBarProps {
  className?: string

  // the outer width of the progress bar (aka. trough) in pixels
  barWidth: number

  // current fill value of the bar
  currentValue: number

  // total fill value of the bar
  totalValue: number

  // progress bar color
  barColor?: string

  children?: ReactNode

  /**
   * Render Props
   */
  renderWrapper?: ProgressBarRenderProps
  renderFillBar?: ProgressBarRenderProps
}