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

//Components
import { UserProfileLayout, Hero } from '../../../index';

class InternStatus extends React.Component {
    render() {
        return (
                <UserProfileLayout>
                    <Text style={Styles.H1}>Status stage pagina</Text>
                    <View>
                        <View style={Styles.StageInfoContainer}>
                            <Text style={Styles.StageInfo}>Weekstaten</Text>
                            <Text style={Styles.StageInfo}>303 van de 720 uur gelopen</Text>
                        </View>
                        <View style={Styles.StageInfoContainer}>
                            <Text style={Styles.StageInfo}>Stage periode</Text>
                            <Text style={Styles.StageInfo}>Stage eindigt over 79 dagen</Text>
                        </View>
                    </View>
                </UserProfileLayout>
        )
    }
}

const Styles = StyleSheet.create({
    H1: {
        color: "#DE0000",
        fontSize: 21,
        textAlign: 'center',
        marginVertical: 10,
    },
    StageInfoContainer: {
        display: 'flex',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingHorizontal: 30,
        marginVertical: 10
    },
    StageInfo: {
        fontSize: 12,
    }
})

export default InternStatus;