import {SafeAreaView} from "react-native-safe-area-context";
import {Button, Image, Text, View} from "react-native-ui-lib";
import React from "react";
import {useRouter} from "expo-router";

export default function Screen() {
    const router = useRouter()

    return (
        <SafeAreaView style={{flex: 1}}>
            <View style={{flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%", alignItems: "center"}}>
                <View>
                    <Image source={require("../../assets/images/splash.png")}/>
                </View>

                <View center gap-13>
                    <Text style={{fontSize: 40, fontFamily: 'Manrope_600SemiBold', marginLeft: 5}}>
                        Welcome to Cally
                    </Text>
                    <Text center color={"#919191"} style={{fontSize: 20, maxWidth: 250}}>
                        Lightening Mental Loads,
                        One Family at a Time
                    </Text>
                </View>

                <View flexG/>

                <View width={"100%"}>
                    <Button
                        label="Continue"
                        marginT-50
                        labelStyle={{
                            fontFamily: "PlusJakartaSans_600SemiBold",
                            fontSize: 16,
                        }}
                        onPress={() => router.push("/(unauth)/get_started")}
                        style={{height: 50}}
                        backgroundColor="#fd1775"
                    />
                </View>
            </View>
        </SafeAreaView>
    )
}