import { View, Text, StyleSheet } from 'react-native'
import React from 'react'
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import HomeScreen from "../screen/HomeScreen"
import SaveScreen from "../screen/SaveScreen"
import {Entypo, MaterialIcons, AntDesign} from '@expo/vector-icons';


const Tab = createBottomTabNavigator(); 

const HomeNavigator = () => {
  return (
    <Tab.Navigator screenOptions={{headerShown: false, tabBarHideOnKeyboard: true}}>
        <Tab.Screen name='home' component={HomeScreen} 
            options={{
                tabBarLabel: "Home",
                tabBarActiveTintColor: '#379777',
                tabBarInactiveTintColor: 'gray',
                tabBarIcon:({focused}) => 
                    focused? (
                        <Entypo name="home" size={26} color="#379777" style={{marginTop: 5, marginBottom: 5}}/>
                    ) : (
                        <Entypo name="home" size={26} color="gray" style={{marginTop: 5, marginBottom: 5}}/>
                )
            }}
        />
        <Tab.Screen name='save' component={SaveScreen} 
            options={{
                tabBarLabel: "Save",
                tabBarActiveTintColor: '#379777',
                tabBarInactiveTintColor: 'gray',
                tabBarIcon:({focused}) => 
                    focused? (
                        <MaterialIcons name="data-saver-on" size={26} color="#379777" style={{marginTop: 5, marginBottom: 5}}/>
                    ) : (
                        <MaterialIcons name="data-saver-on" size={26} color="gray" style={{marginTop: 5, marginBottom: 5}}/>
                )
            }}
        />
    </Tab.Navigator>
  )
}

export default HomeNavigator

const styles = StyleSheet.create({})