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

//Components
import { DefaultLayout, Hero } from '../../index'

const CompanyProfile = ({navigation, route}) => {

        return(
            <DefaultLayout>
                <Hero HeroHeading={route.params.CompanyDetails} HeroText="Ict en meer"/>
                <View  style={{paddingHorizontal:30, paddingVertical:15}}>
                    <View style={{marginBottom:30}}>
                        <Text style={Styles.CompanyHeading}>Wie zijn wij</Text>
                        <Text>
                        Wij zijn appels en peren in een schaal om de fruit fliegjes te bestrijden in de oorlog die gevoert word in china om de bedrijven overal in de ruimte te krijgen voor de genetische modificatie van baby's
                        </Text>    
                    </View>
                    <View style={{marginBottom:30}}>
                    <Text style={Styles.CompanyHeading}>Eisen</Text>
                    <View>
                        <Text>- Moet appels eten</Text>
                        <Text>- Moet poepen om bomen</Text>
                        <Text>- Haat duiven</Text>
                    </View>    
                    </View>
                    <View style={{marginBottom:30}}>
                        <Text style={Styles.CompanyHeading}>Intresse?</Text>
                        <TouchableOpacity style={Styles.Btn}>
                            <Text style={Styles.white}>Soliciteer direct</Text>
                        </TouchableOpacity>    
                    </View>
                </View>    
                <View>
                    <View style={Styles.CompanyContact}>
                        <Text style={Styles.CompanyHeading}>Contact persoon</Text>
                        <Image style={Styles.CompanyImage} source={require('../../Images/stock2.png')}/>
                        <Text style={Styles.CompanyHeading2}>Frits Haringa</Text>
                    </View>
                    
                </View>
            </DefaultLayout>
        );
    
}

const Styles = StyleSheet.create({
    CompanyHeading: {
        fontSize: 20,
        color: '#DE0000',
        marginBottom: 10
    },
    CompanyHeading2: {
        fontSize: 18,
        color: '#DE0000',
        marginVertical: 10
    },
    Btn: {
        backgroundColor: '#DE0000',
        paddingVertical: 10,
        paddingHorizontal: 15,
        borderRadius: 5,
        maxWidth: 140,
        width: '50%'
    },
    white: {
        color: '#ffffff',
    },
    CompanyImage: {
        width:150,
        height: 150,
        borderRadius: 100
    },
    CompanyContact: {
        display: 'flex',
        alignItems: 'center',
        marginBottom: 30,
        marginTop: 15
    },
    SecondaireHeader: {
        color: "#003581",
        textAlign: 'center',
        fontSize: 20,
        marginVertical: 15
    },
})

export default CompanyProfile;