import React from 'react'
import { Image, SafeAreaView, StyleSheet, Text, View, Dimensions } from 'react-native'
import { StatusBar } from 'expo-status-bar'

//Importacion del boton para viajar a la pantalla reportes
import BotonReporte from '../Componentes/BotonReporte'

//importacion de youtbe 
import Youtube from 'react-native-youtube-iframe'


const AbusoSexInfantil = ({navigation}) => {
    const windowWidth = Dimensions.get('window').width;
    const windowHeight = Dimensions.get('window').height;
    return(
        <SafeAreaView style = {styles.contenedor}>
            <StatusBar></StatusBar>
            <Image
            style = {[styles.ImgSubTil, {width: windowWidth * 0.9, height: windowHeight * 0.3}]}
            source={require("../assets/FigTitulos/VSI.png")}/>

            <View style = {styles.VidUno}>
            <Youtube
            videoId='SC_b8kt94xQ'
            height={250}
            width={290}
            />
            </View>

            <View style = {styles.VidDos}>
            <Youtube
            videoId='2NFOV6-5ybY'
            height={250}
            width={290}
            />
            </View>

            <Text style = {styles.TextUno}>¡Hey! ¿Necesitas{"\n"}ayuda para reportar?{"\n"}Presiona el boton de ayuda</Text>

            <BotonReporte onPress={() => {navigation.navigate("Reportes")}}/>

        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    contenedor: {
        backgroundColor: "#519ab4",
        flex: 1,
        justifyContent: "center",
    },
    VidDos: {
        top: "-15%",
        alignItems: "center",
    },
    VidUno: {
        alignItems: "center",
        top: "-10%",
    },
    ImgSubTil: {
        resizeMode: "center",
        alignSelf: "center",
        top: "-3%"
    },
    TextUno: {
        color: "#D9D9D9",
        fontSize: 15,
        fontWeight: "900",
        alignSelf: "center",
        top: "-13%",
        right: "10%"
    },
})

export default AbusoSexInfantil;