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

const Inbox = () => {
  const navigation = useNavigation();

  return (
    <View style={{flex: 1, backgroundColor: "white"}}>
      <View style={{marginTop: 20, paddingHorizontal: 20, paddingVertical: 10}}>
        <Pressable onPress={() => navigation.goBack()} >
          <Ionicons name="chevron-back" size={24} color="gray" />
        </Pressable>
        <Text style={{paddingHorizontal: 10, paddingTop: 10, fontSize: 30, fontWeight: 600}}>Inbox</Text>
      </View>

      <View style={{height: 1, backgroundColor: "#B4B4B8", shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1, }}></View>
      
      <View style={{marginVertical: 50, alignItems: 'center'}}>
        <Image source={require('../../assets/images/misc/empty-inbox.png')} style={{ width: 200, height: 200, resizeMode: "contain"}}  />
        <Text style={{marginTop: 30, fontSize: 16, fontWeight: 500}}>No messages right now</Text>
      </View>
    </View>
  )
}

export default Inbox