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

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

  return (
    <View style={{flex: 1, backgroundColor: "white"}}>
      <View style={{marginTop: 20, paddingHorizontal: 20, paddingVertical: 10}}>
        <Pressable onPress={() => navigation.goBack()} style={{flexDirection: 'row', gap: 5, alignItems: 'flex-end'}}>
          <Ionicons name="chevron-back" size={24} color="gray" />
        </Pressable>
        <Text style={{paddingHorizontal: 10, paddingTop: 10, fontSize: 30, fontWeight: 600}}>Account</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/cannot_load.png')} style={{ width: 200, height: 200, resizeMode: "contain"}}  />
        <Text style={{marginTop: 30, fontSize: 22, fontWeight: 500}}>Something went wrong</Text>
        <Text style={{margin: 10, fontSize: 16, color: "gray", textAlign: 'center'}}>There was a problem and the page could not be loaded at this moment.</Text>
      </View>
    </View>
  )
}

export default Profile