import { useNavigation } from '@react-navigation/native';
import React, { FunctionComponent, ReactNode } from 'react';
import { TouchableOpacity } from 'react-native';

export interface IProps {
  icon: ReactNode;
}
export const BackArrow: FunctionComponent<IProps> = ({ icon }) => {
  const navigation = useNavigation();
  const onBackButtonPressed = () => {
    console.log('Navigation object not available.', navigation.goBack);

    if (navigation && navigation.goBack) {
      navigation.goBack();
    } else {
      console.warn('Navigation object not available.');
    }
  };
  
  return (
    <TouchableOpacity onPress={onBackButtonPressed} >
      {icon}
    </TouchableOpacity>
  );
};