import React from "react";
import { Image, SafeAreaView, StyleSheet, Text, View, Dimensions } from "react-native";
import BotonReporte from "../Componentes/BotonReporte";

//importacion de youtbe 
import Youtube from 'react-native-youtube-iframe'
import { StatusBar } from "expo-status-bar";

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

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

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

            <View style = {styles.VidUno}>
            <Youtube
            videoId='HjXq5lFxBSI'
            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",
    },
    ImgTil: {
        resizeMode: "center",
        alignSelf: "center",
        top: "10%",
    },
    VidDos: {
        top: "1%",
        alignItems: "center",
    },
    VidUno: {
        alignItems: "center",
        top: "-6%",
    },
    VidTres: {
        alignItems: "center",
        top: "8%",
    },
    TextUno: {
        color: "#D9D9D9",
        fontSize: 15,
        fontWeight: "900",
        alignSelf: "center",
        right: "10%",
        top: "-13%"
    },
})

export default MaltratoInfantil;