import PropTypes from 'prop-types'
import { Flex, Typography } from 'antd'
import Flag from './Flag'
import countries from '../../../database/Countries'

const { Text } = Typography

const CountryDisplay = ({ countryCode }) => {
  const country = countries.find((c) => c.code === countryCode)

  if (!country) {
    return null
  }

  return (
    <Flex gap={'small'} align='center'>
      <Flag
        code={country.code}
        size='middle'
        hasBorder={true}
        borderRadius={5}
      />
      <div>
        <Text ellipsis>{country.name}</Text>
      </div>
    </Flex>
  )
}

CountryDisplay.propTypes = {
  countryCode: PropTypes.string.isRequired
}

export default CountryDisplay