//Modules
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';


function Navigate(props) {
    const navigation = useNavigation();
    return(
            <TouchableOpacity style={Styles.Btn} onPress = {() => navigation.navigate('Search')}>
                <Text style={Styles.white}>Klik hier en begin met zoeken</Text>
            </TouchableOpacity>    
    )
}

const Cta = (props) => {
    return (
        <View style={Styles.Cta}>
            <Text style={Styles.WhiteAlert}>Wacht niet te lang!</Text>
            <Navigate/>
        </View>
    )
}

const Styles = StyleSheet.create ({
    Cta: {
        backgroundColor: "#003581",
        paddingTop: 15,
        paddingBottom: 30,
        display: 'flex',
        alignItems: 'center',
        flex: 1,
        justifyContent: 'center'
    },
    Btn: {
        borderStyle: 'solid',
        borderWidth: 2,
        borderColor: '#ffffff',
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        width: 250,
        paddingVertical: 5,

    },
    white: {
        color: '#ffffff',

    },
    WhiteAlert: {
        color: '#ffffff',
        fontSize: 20,
        marginBottom: 15
    }
})

export default Cta;