import React from 'react';
import { SafeAreaView, View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';

const OnboardingScreen = ({navigation}) => {
    return (
        <SafeAreaView style={styles.safeArea}>
            <View style={{marginTop: 20}}>
                <Text style={styles.headText}>DILIGENT</Text>
            </View>
            <View style={styles.logo}>
                <Image style={{width: 300, height: 300}} source={require('../assets/images/diligent-logo.png')} />
            </View>
            <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Login')}>
                <Text style={styles.buttonText}>Let's begin</Text>
                <MaterialIcons name='arrow-forward-ios' size={22} color='#fff' />
            </TouchableOpacity>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    safeArea: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    headText: {
        fontWeight: 'bold',
        fontSize: 70,
        color: '#20315f',
        fontFamily: 'poppins-semibold'
    },
    logo: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    button: {
        backgroundColor: '#AD40AF',
        padding: 20,
        width: '90%',
        borderRadius: 10,
        marginBottom: 50,
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    buttonText: {
        color: 'white',
        fontSize: 18,
        textAlign: 'center',
        fontWeight: 'bold',
        fontFamily: 'poppins-regular'
    }
})

export default OnboardingScreen;