import { Image, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import colors from '../theme/colors'
import PrimaryButton from '../components/organisms/Buttons/PrimaryButton'
import fonts from '../theme/fonts'
import NewscoutTextLogo from '../components/molecules/NewscoutTextLogo'
import images from '../assets/images/images'


const LoginPage = ({ navigation }) => {

    const homePageNavigation = () => {
        navigation.navigate('UnsignedLanding')
    }

    return (
        <View style={[styles.container]}>
            <View style={styles.logoContainer}>
                <NewscoutTextLogo style={styles.logo} />
            </View>
            <View style={styles.sketchContainer}>
                <Image source={images.getStarted} style={[styles.sketch]}/>
            </View>
            <View style={styles.taglineContainer}>
                <Text style={[styles.tagline,{color:colors.black}]}> Get the latest news from </Text>
                <Text style={[styles.tagline,{color:colors.topColor}]}> reliable sources. </Text>
            </View>
            <PrimaryButton
                title="Next"
                onPress={homePageNavigation}
            />
        </View>
    )
}

export default LoginPage

const styles = StyleSheet.create({
    container: {
        backgroundColor: colors.primaryColor_5,
        justifyContent:'center',
        flex:1,
        paddingHorizontal: fonts.getSize(16)
    },
    button: {
        backgroundColor: colors.primaryColor_4
    },
    buttonStyle: {
        fontFamily: 'monospace'
    },
    logo: {
        // width: fonts.getSize(84),
        aspectRatio: 3.0,
        width: '100%',
        height: 64
    },
    logoContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: fonts.getSize(32)
    },
    sketchContainer:{
        height: '42.5%',
        width: '100%',
        
    },
    sketch:{
        width:'100%',
        height: '100%'
    },
    taglineContainer:{
        padding:fonts.getSize(16),
        paddingBottom: fonts.getSize(32)
    },
    tagline:{
        fontFamily: fonts.type.medium,
        fontSize: fonts.getSize(20)
    }

})