import React from 'react'
import { percentageConversion } from './deps'
import { ProgressBarProps } from './typings'
import { ProgressBarWrap, ProgressBarFill } from './styled'

function renderFillBar(props: ProgressBarProps) {
  const { barColor, currentValue, totalValue } = props
  const fillProps = {
    barColor,
    progressWidth: percentageConversion(currentValue, totalValue),
  }
  return <ProgressBarFill {...fillProps} />
}

function renderWrapper(props: ProgressBarProps) {
  const { children, className, barColor, barWidth } = props
  const wrapProps = {
    className,
    barColor,
    barWidth,
  }
  return <ProgressBarWrap {...wrapProps}>{children}</ProgressBarWrap>
}

export { renderFillBar, renderWrapper }