//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(
        <View>
            <TouchableOpacity onPress = {() => navigation.navigate(props.Page)}>
                <Text style={Styles.ProfileText}>{props.Title}</Text>
            </TouchableOpacity>
        </View>
    )
}

    function HrCheck(props) {
        var x = props.hr;
        if (x == "false"){
            return <View></View>
        }
        else {
            return(
                <View style={Styles.HR}/>
            )
        }
    }

const ProfileLink = (props) => {

    return (
        <View>
            <View style={Styles.Profilelink}>
                <Navigate Page={props.Page} Title={props.Title}/>
            </View>
            <HrCheck hr = {props.hr}/>
        </View>
    )
}

const Styles = StyleSheet.create ({
    Profilelink: {
        paddingVertical: 30,
        paddingHorizontal: 60,
        width: '100%'
    },
    ProfileText:{
        color: '#DE0000',
    },
    HR: {
        height: 2,
        backgroundColor: '#DE0000',
        
    }
})

export default ProfileLink;