import { useUser } from '@clerk/clerk-react'
import React from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import { SignOutButton } from '../components/SignOutButton'

export default function PostsScreen() {
    const user = useUser().user
    console.log(user?.emailAddresses)
    return (
        <View style={styles.wrapper}>
            <View>
                <Image></Image>
            </View>
            <View style={styles.nameContainer}>
                <Text style={styles.text}>
                    {user?.firstName} {user?.lastName}
                </Text>
                <Text style={styles.text}>{user?.emailAddresses[0].emailAddress}</Text>
            </View>
            <View style={styles.buttonLayout}>
                <SignOutButton></SignOutButton>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        backgroundColor: '#25292e',
        padding: 5
    },
    nameContainer: { display: 'flex', alignItems: 'center' },
    text: {
        color: 'white',
        fontSize: 16,
        marginTop: 6
    },
    buttonLayout: {
        flex: 1,
        alignItems: 'center',
        marginTop: 12
    }
})