import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Icon } from 'react-native-elements'
import { useNavigation } from '@react-navigation/native';

function Navigate(props) {
    const navigation = useNavigation();
    return(
        <View style={Styles.IconRow}>
            <TouchableOpacity onPress = {() => navigation.navigate('Home')}>
                <Icon
                name='home'
                color='#fff' />
            </TouchableOpacity>
            <TouchableOpacity onPress = {() => navigation.navigate('Search')}>
                <Icon
                name='search'
                color='#fff' />
            </TouchableOpacity>
            <TouchableOpacity onPress = {() => navigation.navigate('Userprofile')}>
                <Icon
                name='mail'
                color='#fff' />
            </TouchableOpacity>
            <TouchableOpacity onPress = {() => navigation.navigate('Userprofile')}>
                <Icon
                name='person'
                color='#fff' />
            </TouchableOpacity>
            
        </View>
        
    )
}

const Footer = () => {
    return (
        <View style={Styles.MainFooter}>
            <Navigate/>
           
        </View>
    )
}

const Styles = StyleSheet.create({
    MainFooter: {
        width: '100%',
        height: 50,
        color: '#ffffff',
        backgroundColor: '#003581',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute', //Here is the trick
        bottom: 0, //Here is the trick
    },
    IconRow: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '80%',
    }
})

export default Footer;