import { StyleProp, Text, TextStyle } from 'react-native'

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { Strings } from '../i18n'
import { formatPercent } from '../util'
import { formatDurationSecondsInMMSS } from '../util/date'

export const AverageViewDuration: React.FC<{
  averageViewDurationPercentage: number
  durationSeconds: number
  textStyle?: StyleProp<TextStyle>
  percentageTextStyle?: StyleProp<TextStyle>
}> = ({
  averageViewDurationPercentage,
  durationSeconds,
  textStyle,
  percentageTextStyle,
}) => (
  <Text style={[TextStyles.bodyBold, { color: colors.white }, textStyle]}>
    <Text style={[{ color: colors.white }, percentageTextStyle]}>
      {formatPercent(averageViewDurationPercentage, 0, false)}{' '}
    </Text>
    {Strings.Shared.XOfY} {formatDurationSecondsInMMSS(durationSeconds)}
  </Text>
)