import React, { memo } from 'react';
import Flag from 'react-native-country-flag';
import { Text, View } from 'react-native';
import { withTheme } from '../../branding';
import styles from './styles';
import GlobalFlagIcon, {
    globalFlagIconSize
} from '../../components/Icons/GlobalFlagIcon';
import type { ThemeModeType } from '../BrandFilters/BrandFilters.tsx';

interface CountryLabelProps {
    countryCode?: string;
    theme: ThemeModeType;
}

export const CountryLabel = ({ countryCode, theme }: CountryLabelProps) => {
    const themeStyles = styles[theme];

    return (
        <View testID="countryLabel" style={themeStyles.countryContainer}>
            {countryCode ? (
                <Flag
                    size={12}
                    isoCode={countryCode}
                    style={themeStyles.flag}
                />
            ) : (
                <GlobalFlagIcon size={globalFlagIconSize.s} />
            )}
            <Text style={themeStyles.title}>
                {countryCode?.toUpperCase() || 'GL'}
            </Text>
        </View>
    );
};

export default memo(withTheme(CountryLabel));