    import { BottomTabBarOptions, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
    import React from "react";
    import { Map } from "../components/Map";
    import { Profile } from "../components/Profile";
    import { colors } from "../globals";
    import { FontAwesome } from '@expo/vector-icons';
    import { authStore } from "../stores/AuthStore";
    import { observer } from "mobx-react";

    const MainTabs = createBottomTabNavigator();

    const tabBarOptions: BottomTabBarOptions = {
        keyboardHidesTabBar: true,
        activeTintColor: 'white',
        inactiveTintColor: "lightgrey",
        style: {paddingBottom: 5, backgroundColor: colors.red}
    }

    /**
     * The root navigator for all authorized screens ({@link Map}, {@link Profile}). It uses a [React Navigation Bottom Tabs Navigator]{@link https://reactnavigation.org/docs/bottom-tab-navigator/} the main navigation mechanism.
     * @category Navigation
     * @component
     */
    const AuthorizedNavigator: React.FC = () => {
        return(
            <MainTabs.Navigator
                initialRouteName="Map"
                tabBarOptions={tabBarOptions}>
                <MainTabs.Screen name="Map" component={Map} options={{tabBarIcon: ({color}) => (<FontAwesome name="map" size={15} color={color}/>)}} />
                <MainTabs.Screen name="Profile" options={{tabBarIcon: ({color}) => (<FontAwesome name="user" size={15} color={color}/>)}} >
                    {(props) => <Profile userId={authStore.userId as string} />}
                </MainTabs.Screen>
            </MainTabs.Navigator>
        )
    }

    export default observer(AuthorizedNavigator);