import React, {memo} from 'react';
import {TouchableOpacity, View} from 'react-native';
import {ICountry} from '@shared/countries';
import Text from '@components/Text';
import Icon from '@components/Icon';

import {styles} from './styles';

interface Props {
  countrySelected: ICountry;
  onPress: () => void;
  disabled?: boolean;
}

function DialCode({countrySelected, onPress, disabled}: Props) {
  return (
    <TouchableOpacity
      style={styles.container}
      onPress={onPress}
      disabled={disabled}>
      <Text style={styles.flag}>{countrySelected.flag}</Text>
      <Text variant="body2">{countrySelected.dialCode}</Text>
      <View style={styles.icon}>
        <Icon name="expandMore" />
      </View>
    </TouchableOpacity>
  );
}

export default memo(DialCode);
