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

import { DspColors } from '../Colors'
import { Dsp, SocialFollowers } from '../Consts'
import { TextStyles } from '../Styles'
import { Strings } from '../i18n'

/**
 * Colorized dsp name
 */
export const TinyDspLabel: React.FC<{
  dsp: Dsp | SocialFollowers | 'all'
  dspAdditionalText?: string
}> = ({ dsp, dspAdditionalText }) => (
  <Text
    style={[
      TextStyles.tinyBold,
      { color: DspColors[dsp], textTransform: 'uppercase' },
    ]}
  >
    {dsp ?? Strings.Shared.AllDSPs} {dspAdditionalText}
  </Text>
)