/** Custom header right component **/
import React, { Component } from 'react';
import { View } from 'react-native';
import { Icon } from 'react-native-elements';
import colors from '../../config/colors.json';

class HeaderRight extends Component {
  /**
  * Render Method
  **/
  render() {
    return (
      <View style={styles.mainViewStyle}>
          <Icon
            name={'wallet'}
            type='entypo'
            color={colors.middleGrey}
            size={30}
            containerStyle={styles.iconStyle}
            onPress={() => this.props.navigation.navigate('walletHomeScreen')}
          />
          <Icon
            name='notifications'
            color={colors.middleGrey}
            size={30}
            containerStyle={styles.iconStyle}
            onPress={() => this.props.navigation.navigate('notificationsListScreen')}
            backgroundColor={colors.transparent}
          />
      </View>
    );
  }
}

const styles = {
  mainViewStyle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: 20,
    marginRight: 20,
  },
  iconStyle: {
    marginLeft: 10,
  }
};

export default HeaderRight;
