import React from 'react';
import PropTypes from 'prop-types';

import { Image, TouchableOpacity, View } from 'react-native';
import { Icon } from 'react-native-elements';

import styles from './UserProfileButton.styles.js';

export default function UserProfileButton({ avatarUrl, navigation }) {

  const _goToProfile = () => {
    navigation.navigate('Profile');
    return false;
  };

  return (
    <TouchableOpacity onPress={_goToProfile}>
      {avatarUrl !== null ? (
        <View style={styles.avatarWrap}>
          <Image source={{ uri: avatarUrl }} />
        </View>
      ) : (
        <Icon name="ei-user" type="evilicons" size={28} />
      )}
    </TouchableOpacity>
  );
}

UserProfileButton.propTypes = {
  avatarUrl: PropTypes.string,
};

UserProfileButton.propTypes = {
  avatarUrl: null,
};
