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

import { colors } from '../Colors'
import { Dsp } from '../Consts'
import { TextStyles } from '../Styles'
import { formatCountShort } from '../util'
import { DspIcon } from './DspIcon'

/**
 * DSP icon and stream count
 */
export const DspStreams: React.FC<{
  dsp: Dsp
  streams: number
  gap?: number
}> = ({ dsp, streams, gap }) => (
  <View
    key={dsp}
    style={{
      flexDirection: 'row',
      alignItems: 'center',
      paddingTop: 10,
      paddingRight: 26,
    }}
  >
    <DspIcon dspSlug={dsp} fill={colors.platform[dsp]} width={16} height={16} />
    <Text
      style={[
        TextStyles.body,
        {
          color: colors.white,
          paddingLeft: gap,
        },
      ]}
    >
      {formatCountShort(streams)}
    </Text>
  </View>
)