import { useNavigation } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar';
import React from 'react'
import { SafeAreaView, StyleSheet, Text, Image, TouchableOpacity, Dimensions } from 'react-native';

const ScreenVistaInicio = () => {
  const navigation = useNavigation()
  const windowWidth = Dimensions.get('window').width;
  const windowHeight = Dimensions.get('window').height;
  return (
    <SafeAreaView style = {styles.Contenedor}>
      <StatusBar></StatusBar>
      <Image style={[styles.imgUno, {width: windowWidth * 0.8, height: windowHeight * 0.5}]} 
      source={require("../assets/FigTitulos/FigTitulo.png")} />

      <TouchableOpacity style={[styles.botonUno, {marginTop: windowHeight * 0.05}]} 
      onPress={() => navigation.navigate("Inicio de Sesion")}>
        
        <Text style = {styles.TextDos}>
          Inicia Sesión
        </Text>
      </TouchableOpacity>

      <Image style={[styles.KidDos, {width: windowWidth * 0.99, height: windowHeight * 0.499}]} 
      source={require("../assets/FigIcon/Kidsmge.png")} />

      



    </SafeAreaView>
  )
}


const styles = StyleSheet.create({
  Contenedor: {
    backgroundColor: "#519ab4",
    flex: 1,
    alignItems: 'center',
  },
  KidDos: {
    resizeMode: "center",
    top: "-11%",
  },
  imgUno: {
    resizeMode: "center",
  },
  botonUno: {
    backgroundColor: "#62acac",
    paddingVertical: 20,
    marginVertical: 50,
    borderRadius: 10,
    alignItems: "center",
    width: "50%",
    top: "-3%",
  },
  TextDos: {
    color: "#D9D9D9",
    fontSize: 18,
  },

    
})
export default ScreenVistaInicio;
