import React, { useContext, useEffect, useState } from "react";

import { FontAwesome5 } from "@expo/vector-icons";
import {
  HeaderButtons,
  HeaderButton,
  Item,
} from "react-navigation-header-buttons";

const IoniconsHeaderButton = (props) => (
  <HeaderButton IconComponent={FontAwesome5} iconSize={23} {...props} />
);

function HeaderBarMenu(navigation) {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
          <Item
            title="user"
            iconName="user"
            onPress={() => navigation.navigate("Perfil")}
          />
        </HeaderButtons>
      ),
    });
  }, [navigation]);
}

export default HeaderBarMenu;