import React from 'react'
import { StyleProp, View, ViewStyle } from 'react-native'
import { colors } from '../Colors'

export const ProgressBar: React.FC<{
  value: number
  maxValue?: number
  backgroundColor?: string
  progressColor?: string
  height?: number
  style?: StyleProp<ViewStyle>
}> = ({ value, maxValue, backgroundColor, progressColor, height, style }) => {
  return (
    <View
      style={[
        {
          backgroundColor,
          height,
          flex: 1,
          borderRadius: height,
          flexDirection: 'row',
        },
        style,
      ]}
    >
      <View
        style={{
          backgroundColor: progressColor,
          borderRadius: height,
          flex: value / maxValue,
          minWidth: height, //ensure start of bar is always rounded
        }}
      />
    </View>
  )
}

ProgressBar.defaultProps = {
  backgroundColor: colors.gray,
  progressColor: colors.white,
  height: 8,
  maxValue: 1.0,
}