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

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, width: '100%' }}
    >
      <Flag
        code={country.code}
        size='middle'
        hasBorder={true}
        borderRadius={5}
      />
      <div style={{ minWidth: 0, flex: 1, overflow: 'hidden' }}>
        <ElipsisText>{country.name}</ElipsisText>
      </div>
    </Flex>
  )
}

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

export default CountryDisplay