import React from "react";
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from "react-native";
import { MaterialIcons } from "@expo/vector-icons";
import { useNavigation } from '@react-navigation/native';
import themeColors from "../assets/colors";

export function AuctionBottomTab() {
    const navigation = useNavigation();
    return(
        <View style={styles.bottomBtn}>

            <TouchableOpacity style={styles.barButtonView}
                onPress={() => navigation.navigate("UserBidScreen")}
            >
            <MaterialIcons name="leaderboard" size={24} color={themeColors.WHITE} />
                <Text style={styles.iconText}>Bids</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.barButtonView}
             onPress={() => navigation.navigate("UserAuctionScreen")}
            >
            <MaterialIcons name="gavel" size={24} color={themeColors.WHITE} />
                <Text style={styles.iconText}>Auctions</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.barButtonView}
             onPress={() => navigation.navigate("AuctionHomeScreen")}
            >
            <MaterialIcons name="home" size={24} color={themeColors.WHITE}  />
                <Text style={styles.iconText}>Home</Text>
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
  iconText: {
    color: themeColors.WHITE
  },
  bottomBtn:{
    height:60,
    flexDirection:"row",
    justifyContent:"space-between",
    paddingHorizontal: 30,
    backgroundColor:themeColors.BLACK,
    borderTopRightRadius: 30,
    borderTopLeftRadius: 30,
    alignItems:"center"
  },
  barButtonView:{
      marginTop:5,
      flexDirection:"column",
      alignItems:"center"
  }

})