import React from 'react'
import { View, Text } from 'react-native'
import { colorsV2 } from '../Colors'
import { Dsp } from '../Consts'
import { TextStylesV2 } 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: 9,
    }}
  >
    <DspIcon dspSlug={dsp} fill={colorsV2.white} width={16} height={16} />
    <Text
      style={[TextStylesV2.body, { color: colorsV2.white, paddingLeft: gap }]}
    >
      {formatCountShort(streams)}
    </Text>
  </View>
)