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

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>
                <Pressable style={[button, styles.button]}>
                    <Link href={"/home"}>
                        <Text style={styles.buttonLabel}>Get Started</Text>
                    </Link>
                </Pressable>
                <Text style={{ ...fonts.titleMedium, ...styles.loginInfo }}>
                    Already have an account?
                    <Text style={styles.loginText} onPress={goToLogin}>
                        Login
                    </Text>
                </Text>
                <PushNotification></PushNotification>
            </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",
        backgroundColor:"#DD9C47",
        paddingVertical:12,
        paddingHorizontal:25,
        borderRadius:30
    },
    buttonLabel: {
        fontWeight: "700",
        color: "#FFF",
        fontSize: 16,

    },
    loginInfo: {
        marginBottom: 20,
        maxWidth: "70%",
        textAlign: "center",
        fontWeight: "bold"
    },
    loginText: {
        marginLeft: 5,
        color:"#396868"
    }
});

export default Welcome;