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,
};