import { Box } from './Box';

export interface CountryFlagProps {
  countryCode: string;
  size?: 'sm' | 'md' | 'lg';
}

export const CountryFlag = ({ 
  countryCode, 
  size = 'md' 
}: CountryFlagProps) => {
  const sizeMap = {
    sm: '1rem',
    md: '1.5rem',
    lg: '2rem',
  };

  return (
    <Box 
      width={sizeMap[size]} 
      height={sizeMap[size]} 
      display="flex" 
      alignItems="center" 
      justifyContent="center" 
      overflow="hidden"
      style={{ borderRadius: '2px' }}
    >
      <img 
        src={`https://flagcdn.com/w40/${countryCode.toLowerCase()}.png`} 
        alt={countryCode}
        className="w-full h-full object-cover"
      />
    </Box>
  );
};