import React from 'react';
import { Box, Button, Heading, Text, HStack, Pressable, Divider, ButtonText, SafeAreaView } from '@gluestack-ui/themed';
import { useNavigation } from '@react-navigation/native';
import { Ionicons } from '@expo/vector-icons';
import { Linking } from 'react-native';

const UnAuthenticatedComponent = () => {
    const navigation = useNavigation<any>();
    return (
        <SafeAreaView flex={1}>
            <Box flex={1} borderTopWidth={'$1'} borderTopColor={'$trueGray200'}>
                {/* <Box h={'$1'} bg={Colors.primaryBgColor} /> */}
                <Box flex={1} p={'$6'} bg="$white" justifyContent={'center'}>
                    <Heading mt={'$2'}>Login</Heading>
                    <Text fontSize="$md" mt={'$2'}>
                        Log in to continue.
                    </Text>
                    <Button bg={'$blue500'} size="lg" my={'$3'} onPress={() => navigation.navigate('MainStack.Login')}>
                        <ButtonText color="$white">Login</ButtonText>
                    </Button>
                    <Divider my={'$3'} />
                </Box>
            </Box>
        </SafeAreaView>
    );
};

export default UnAuthenticatedComponent;