import { Pressable, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { FontAwesome, Feather } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';


const HomeHeader = () => {
    const navigation = useNavigation();
    
    const date = new Date();
    const hours = date.getHours();
    let message;

    if (hours < 12) {
    message = <Text>Good Morning &#9728;</Text>;
    } else if (hours < 18) {
    message = <Text>Good Afternoon &#9728;</Text>;
    } else {
    message = <Text>Good Evening &#57420;</Text>;
    }

  return (
    <>
        <View style={{marginTop: 20, paddingHorizontal: 20, paddingVertical: 10}}>
            <View>
                <Text style={{fontSize: 30, fontWeight: 600}}>{message}</Text>
            </View>
            <View style={{marginTop: 30, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
                <Pressable onPress={() => navigation.navigate('inbox')} style={{flexDirection: 'row', gap: 5, alignItems: 'flex-end'}}>
                    <Feather name="mail" size={24} color="gray" /><Text style={{fontSize: 16}}>Inbox</Text>
                </Pressable>
                <Pressable onPress={() => navigation.navigate('profile')}>
                    <FontAwesome name="user-circle-o" size={24} color="gray" /> 
                </Pressable>
            </View>
        </View>
        <View style={{height: 1, backgroundColor: "#B4B4B8", shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1, }}></View>
    </>
  )
}

export default HomeHeader

const styles = StyleSheet.create({
    Emoji:{
        padding: 20
    }
})