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'
      className='country-display'
      style={{ minWidth: 0 }}
    >
      <Flag
        code={country.code}
        size='middle'
        hasBorder={true}
        borderRadius={5}
      />
      <div style={{ minWidth: 0 }}>
        <Text ellipsis>{country.name}</Text>
      </div>
    </Flex>
  )
}

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

export default CountryDisplay
