import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const MainScreen = () => {
    const navigation = useNavigation();

    const navigateToSendEmail = () => {
        navigation.navigate('SendEmail');
    }

    const navigateToSendSMS = () => {
        navigation.navigate('SendSMS');
    }

    return (
        <View style={styles.container}>
            <Text style={styles.title}>SEND MY INFO</Text>
            <Text style={styles.title}>l_mclean215318</Text>
            <View style={styles.buttonContainer}>
                <Button title="EMAIL MY INFO" color="green" onPress={navigateToSendEmail} />
            </View>
            <View style={styles.buttonContainer}>
                <Button title="SMS MY INFO" color="blue" onPress={navigateToSendSMS} />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        marginTop: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    title: {
        fontSize: 30,
        fontWeight: 'bold',
        marginBottom: 20,
        alignItems: 'center',
    },
    buttonContainer: {
        borderRadius: 10,
        marginTop: 10,
        padding: 10,
        width: 200,
        alignItems: 'center',
    },
});

export default MainScreen;