import React from 'react'
import { Text } from 'react-native'

import { formatCountShortSeparate } from '../util'
import { TextStyles } from '../Styles'
import { colors } from '../Colors'

type Props = {
  currentValue: number
}

export function Current({ currentValue }: Props) {
  const formattedValue = formatCountShortSeparate(currentValue)
  return (
    <Text style={[TextStyles.h1, { color: colors.white, marginVertical: -12 }]}>
      {formattedValue.number}
      <Text
        style={[
          TextStyles.bodyHeader,
          { color: colors.white, textTransform: 'uppercase' },
        ]}
      >
        {' '}
        {formattedValue.postfix}
      </Text>
    </Text>
  )
}