import React, { useState } from "react";
import { StyleSheet, SafeAreaView, Text, TextInput, View, Image, ScrollView } from "react-native";
import { Button} from 'native-base';
import { useTheme } from '@react-navigation/native';
import Logo from '../../resources/logo.png';

function LandingPage({navigation}) {
    const { colors } = useTheme();

    function handleSignUp() {
        navigation.navigate("Name")
    }

    function handleSignIn() {
        navigation.navigate("Login")
    }
    return (
        <ScrollView>

        <SafeAreaView style={ [styles.screen, {flexDirection:"column"}] }>
            <View style={ [styles.logoPosition, {flexDirection:"row"}] }>
                <Image source = { Logo } style = { styles.logoSize } />
            </View>
            <Button style={ styles.signUpButton } onPress={handleSignUp}>
                        <Text style={ styles.buttonText }>Sign Up</Text>
            </Button>
            <Button style={ styles.signUpButton} onPress={handleSignIn}>

                        <Text style={ styles.buttonText }>Sign In</Text>
            </Button>
        </SafeAreaView>
        </ScrollView>

    );
}

const styles = StyleSheet.create({
    screen:{
        marginTop: "50%",
        paddingLeft: "10%",
        paddingRight: "10%",
        paddingBottom: "12%",
        marginLeft: "10%",
        marginRight: "10%"
    },
    signUpButton: {
        marginLeft: "27%",
        marginBottom: "5%",
        marginTop: '5%',
        width: '50%',
        backgroundColor: '#d4911c',
        borderRadius: 10,
        justifyContent: 'center',
    },
    buttonText: {
        fontSize: 15,
        fontWeight: "bold",
        color: "white"
    },
    logoPosition: {
        marginTop: "10%",
        marginBottom: "5%",
        marginRight: "10%",
        marginLeft: "10%",
        aspectRatio: 0.65
    },
    logoSize: {
        marginTop: "5%",
        aspectRatio: 1,
        width: 250,
        height: 250,

    },
});

export default LandingPage;