import React, { useState, useEffect } from "react";
import {
  StyleSheet,
  Button,
  TextInput,
  View,
  Text,
  TouchableOpacity,
  ImageBackground,
} from "react-native";
import { Entypo } from "@expo/vector-icons";
import {
    AntDesign,
    MaterialCommunityIcons,
    Ionicons,
  } from "@expo/vector-icons";
  import { MaterialIcons } from '@expo/vector-icons';
  import { gamification } from "../screen/gamification";
  import { useNavigation } from '@react-navigation/native';

export function BottomTab() {
    const navigation = useNavigation(); 
    return(
        <View style={styles.bottomBtn}>
            <TouchableOpacity style={styles.barButtonView}
             onPress={() => navigation.navigate("gamification")}
             >
            <Ionicons name="game-controller" size={24} color="black" />
                <Text>Gamification</Text>
            </TouchableOpacity>


            <TouchableOpacity style={styles.barButtonView}
             onPress={() => navigation.navigate("gamification")}
            >
            <Ionicons name="hardware-chip-sharp" size={24} color="black" />
                <Text>IOT</Text>
            </TouchableOpacity>


            <TouchableOpacity style={styles.barButtonView}
                onPress={() => navigation.navigate("Leaderboard")}
            >
            <MaterialIcons name="leaderboard" size={24} color="black" />
                <Text>Leaderboard</Text>
            </TouchableOpacity>


            <TouchableOpacity style={styles.barButtonView}
             onPress={() => navigation.navigate("gamification")}
            >
            <Ionicons name="hardware-chip-sharp" size={24} color="black" />
                <Text>Auction</Text>
            </TouchableOpacity>


            <TouchableOpacity style={styles.barButtonView}
             onPress={() => navigation.navigate("HomeScreen")}
            >
            <Ionicons name="home" size={24} color="black" />
                <Text>Home</Text>
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({

    bottomBtn:{
        width:"100%",
        height:60,
        flexDirection:"row",
        justifyContent:"space-between",
        padding:15,
        backgroundColor:"white",
        alignItems:"center"

    },
    barButtonView:{
        marginTop:5,
        flexDirection:"column",
        alignItems:"center"
    }

})