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

function Navigate(props) {
    const navigation = useNavigation();
    return(
        <TouchableOpacity style={Styles.Btn} onPress = {() => navigation.navigate('Companyprofile', { CompanyDetails: props.Details })}>
            <Text style={Styles.white}>Bekijk bedrijf</Text>
        </TouchableOpacity>
    )
}

class CompanyResultCard extends React.Component{
    constructor (props) {
        super(props);
        this.state = {

        }
        
    }
    

    render() {
        
        return (
            <ScrollView>
            <View style={Styles.ResultCard}>
                <View style={Styles.Row}>
                    <Text style={Styles.HeroHeading}>Bedrijfsnaam 1</Text>
                   <Navigate Details = {this.props.details}/>
                </View>
                <View style={Styles.ContentRow}>
                    <Text>Locatie: Groningen</Text>
                    <Text>Opleding: AO</Text>
                </View>
                <View style={Styles.ContentRowRa}>
                    <Text>Beschikbaarheid: 2 plekken over</Text>
                </View>
                
            </View>
            <View style={Styles.HR}/>
            </ScrollView>
        )
    }
}



const Styles = StyleSheet.create ({
    ResultCard: {
        padding: 30,
    },
    HeroHeading: {
        color: "#DE0000",
        fontSize: 20,
    },
    Btn: {
        backgroundColor: '#DE0000',
        paddingVertical: 10,
        paddingHorizontal: 15,
        borderRadius: 5,
       
    },
    white: {
        color: '#ffffff',
    },
    Row: {
        display: 'flex',
        flexDirection: 'row',
        width: '100%',
        flexWrap: 'wrap',
        justifyContent: 'space-between'
    },
    ContentRow: {
        display: 'flex',
        flexDirection: 'row',
        width: '100%',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        marginTop: 15,
    },
    ContentRowRa: {
        display: 'flex',
        flexDirection: 'row',
        width: '100%',
        flexWrap: 'wrap',
        justifyContent: 'flex-end',
        marginTop: 15,
    },
    HR: {
        height: 2,
        backgroundColor: '#DE0000',
        
    }
})

export default CompanyResultCard;