import { Ionicons } from "@expo/vector-icons";
import { View, Text, Image} from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useNavigation, NavigationProp, useFocusEffect } from '@react-navigation/native';
import config from "../components/data/config.json";``

export default function Nav() {

    const navigation = useNavigation<NavigationProp<any>>();

    return (<>
        <View style={{
            height: 60,
            backgroundColor: "#fff",
            flexDirection: "row",
            shadowColor: "#000",
            shadowOffset: {
                width: 0,
                height: 2,
            },
            shadowOpacity: 0.25,
            shadowRadius: 3.84,
            elevation: 5,
        }}>
            <TouchableOpacity onPress={() => navigation.navigate('home')} style={{ width: 140, flex: 1 }}>
                <View style={{ justifyContent: "center", height: 60, flexDirection: "column", alignItems: "center" }}>
                    <Ionicons name="home" size={24} color={config.color.textbiru} />
                    <Text style={{ color: config.color.textbiru }}>Home</Text>
                </View>
            </TouchableOpacity>
            <View style={{ flex: 1 }}>
                <TouchableOpacity onPress={() => navigation.navigate('order')} activeOpacity={1} style={{ justifyContent: "center", height: 60, flexDirection: "column", alignItems: "center" }}>
                    <Image style={{
                        width: 60,
                        height: 60,
                        marginBottom: 30,
                        resizeMode: 'contain'
                    }} source={require('../assets/images/g42.png')} />
                </TouchableOpacity>
            </View>
            <TouchableOpacity onPress={() => navigation.navigate('profile')} style={{ width: 140, flex: 1 }}>
                <View style={{ justifyContent: "center", height: 60, flexDirection: "column", alignItems: "center" }}>
                    <Ionicons name="person" size={24} color={config.color.textbiru} />
                    <Text style={{ color: config.color.textbiru }}>Profile</Text>
                </View>
            </TouchableOpacity>
        </View>
    </>
    );
}