import { StyleSheet, Text, TouchableHighlight } from "react-native";
import { useTheme } from "../../app/contexts/ThemeContext";

export type NavigationButtonProperties = {
    onPress?: () => void | undefined,
    text: string,
}

const NavigationButton = (properties: NavigationButtonProperties) => {

    const {colors} = useTheme();

    return (
        <TouchableHighlight 
            onPress={properties.onPress} 
            underlayColor={colors.elementSelectedColor} 
            style={[styles.touchableHighlightStyle, {backgroundColor: colors.elementDefaultColor}]}>
            
            <Text style={[styles.buttonTextStyle, {color: colors.primaryText}]}>{properties.text}</Text>
        </TouchableHighlight>
    );
}

export default NavigationButton;

const styles = StyleSheet.create({
    touchableHighlightStyle: {
        borderRadius: 10,
        marginVertical: 10,
        marginHorizontal: 15,
        paddingHorizontal: 20,
        paddingVertical: 5,
    },
    buttonTextStyle: {
        textAlign: "center",
        fontSize: 30,
    }
});