import React from 'react';
import Box from '@mui/material/Box';
import { polyfillCountryFlagEmojis } from 'country-flag-emoji-polyfill';


const Flag = ({ country }) => {
  polyfillCountryFlagEmojis();

  return (
    <Box
      title={country.name}
      sx={{
        display: 'inline-block',
        m: '0 !important',
        p: '0 4px !important',
      }}
    >
      {country.flag}
    </Box>
  );
}

export default Flag;