import React from 'react'
import { StyleProp, View, ViewStyle } from 'react-native'
import { CountryIconAndName } from './CountryIconAndName'

/**
 * A row representing a country/market
 */
export const CountryRow: React.FC<{
  countryCode: string
  countryName: string
  style?: StyleProp<ViewStyle>
}> = ({ countryCode, countryName, style }) => (
  <View
    style={[
      {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
      },
      style,
    ]}
  >
    <CountryIconAndName
      countryCode={countryCode}
      countryName={countryName}
      style={{ flexShrink: 1 }}
      spaceBetween={16}
    />
  </View>
)