import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { Button, useTheme } from 'react-native-paper';
import text4uLogo from '@/assets/images/text4ulogo.png'
import text4uTitle from '@/assets/images/text4utitle.png'

const Welcome = () => {
    const { colors, button, fonts } = useTheme();

    const goToLogin = () => {
        console.log("go to login")
    }

    return (
        <View
            style={[styles.container, { backgroundColor: colors.background }]}
        >
            <View style={[styles.logoContainer]}>
                <Image style={[styles.logo]} source={text4uLogo}></Image>
                <Image style={[styles.logoTitle]} source={text4uTitle}></Image>
            </View>
            <View style={styles.mainContainer}>
                <Text style={[fonts.titleLarge, styles.heading]}>
                    Notification Made Easy.
                </Text>
                <Text style={[fonts.titleSmall, styles.subHeading]}>
                    Empowering you with instant alerts for every important moment!
                </Text>
                <Button
                    mode="contained"
                    style={[button, styles.button]}
                    labelStyle={{ ...fonts.titleMedium, ...styles.buttonLabel }}
                >
                    Get Started
                </Button>
                <Text style={{ ...fonts.titleMedium, ...styles.loginInfo }}>
                    Already have an account?
                    <Text style={styles.loginText} onPress={goToLogin}>
                        Login
                    </Text>
                </Text>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: "100%"
    },
    logoContainer:{
        marginTop:"auto",
        marginBottom:"auto"
    },
    logo:{
        marginLeft:"auto",
        marginRight:"auto"
    },
    logoTitle:{
        marginLeft:"auto",
        marginRight:"auto"
    },
    mainContainer:{
        alignItems:"center",
        marginTop:"auto",
        marginBottom:"auto"
    },
    heading: {
        fontWeight: "bold",
        marginBottom: 20,
    },
    subHeading: {
        marginBottom: 20,
        maxWidth: "70%",
        textAlign: "center",
        marginBottom: 36
    },
    button: {
        marginBottom: 36,
        marginLeft:"auto",
        marginRight:"auto"
    },
    buttonLabel: {
        fontWeight: "bold"
    },
    loginInfo: {
        marginBottom: 20,
        maxWidth: "70%",
        textAlign: "center",
        fontWeight: "bold"
    },
    loginText: {
        marginLeft: 5,
        color:"#396868"
    }
});

export default Welcome;