import React from 'react';
import { View, TouchableOpacity } from 'react-native';
import { createStackNavigator } from 'react-navigation';

import { Icon } from 'react-native-elements';

const headerLeft = (
  <View style={{ flexDirection: 'row' }}>
    <TouchableOpacity style={{ marginLeft: 10 }}>
      <Icon name='settings' type='simple-line-icon' size={28} color='#253C50' />
    </TouchableOpacity>

    <TouchableOpacity style={{ marginLeft: 15 }}>
      <Icon name='globe' type='simple-line-icon' size={28} color='#253C50' />
    </TouchableOpacity>
  </View>
);

const headerRight = (
  <View style={{ flexDirection: 'row' }}>
    <TouchableOpacity style={{ marginRight: 15 }}>
      <Icon name='wallet' type='entypo' size={32} color='#253C50' />
    </TouchableOpacity>

    <TouchableOpacity style={{ marginRight: 10 }}>
      <Icon name='bell-outline' size={32} type='material-community' color='#253C50' />
    </TouchableOpacity>
  </View>
);


export default function TopStackNavigator(routes) {
  return createStackNavigator(
    routes,
    {
      defaultNavigationOptions: {
        title: 'PUBLIC PROFILE',
        headerRight,
        headerLeft
      }
    });
}
