    import React from "react";
    import { GestureResponderEvent, StyleProp, StyleSheet, Text, TouchableOpacity, ViewStyle } from "react-native";
    import { colors } from "../../globals";

    export type ButtonProps = {
        text: string,
        onPress: (event: GestureResponderEvent) => void,
        style?: StyleProp<ViewStyle>
    }

    /**
     * A general component that represents a primary button.
     * @component
     */
    export const PrimaryButton: React.FC<ButtonProps> = ({text, onPress, style}) => {
        return(
        <TouchableOpacity style={[styles.btn, styles.primaryBtn, style]} onPress={onPress}>
            <Text style={{color: 'white'}}>{text}</Text>
        </TouchableOpacity>)
    }

    /**
     * A general component that represents a secondary button.
     * @component
     */
    export const SecondaryButton: React.FC<ButtonProps> = ({text, onPress, style}) => {
        return(
        <TouchableOpacity style={[styles.btn, styles.secondaryBtn, style]} onPress={onPress}>
            <Text style={{color: 'white'}}>{text}</Text>
        </TouchableOpacity>)
    }

    const styles = StyleSheet.create({
        btn: {
            borderRadius: 50,
            width: '100%',
            justifyContent: 'center',
            alignItems: 'center',
            height: 60,
            marginBottom: 20,
        },
        primaryBtn: {
            backgroundColor: colors.red,
        },
        secondaryBtn: {
            borderColor: 'white',
            borderWidth: 2,
            backgroundColor: 'transparent',
        }
    })