import React from 'react'
import { Image, StyleProp, Text, View, ViewStyle } from 'react-native'
import { colorsV2 } from '../Colors'
import { countryImages } from '../countryImages'
import { TextStylesV2 } from '../Styles'
import { formatCountryName } from '../util'

export const CountryIcon: React.FC<{
  countryCode: string
  size: number
}> = ({ countryCode, size }) => (
  <Image
    source={countryImages[countryCode] ?? countryImages['placeholder']}
    width={size}
    height={size}
    style={{ width: size, height: size }}
  />
)

/**
 * Country icon and name
 */
export const CountryIconAndName: React.FC<{
  countryCode: string
  countryName: string
  style?: StyleProp<ViewStyle>
  spaceBetween?: number
}> = ({ countryCode, countryName, style, spaceBetween = 8 }) => {
  return (
    <View
      style={[
        {
          flexDirection: 'row',
          alignItems: 'center',
        },
        style,
      ]}
    >
      <CountryIcon countryCode={countryCode} size={32} />
      <Text
        style={[
          TextStylesV2.body,
          { color: colorsV2.white, marginLeft: spaceBetween, flexShrink: 1 },
        ]}
        numberOfLines={1}
        ellipsizeMode="tail"
      >
        {formatCountryName(countryName)}
      </Text>
    </View>
  )
}