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

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

function renderWrapper(props: ProgressBarProps) {
  const { children, className, barColor } = props
  return (
    <PrgressBarWrap className={className} progressbarColor={barColor}>
      {children}
    </PrgressBarWrap>
  )
}

export { renderFillBar, renderWrapper }