import React from 'react';
import { Modal, View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, ScrollView } from 'react-native';



const ModalTalleres = ({ visible, onClose }) => {
  const windowWidth = Dimensions.get('window').width;
    const windowHeight = Dimensions.get('window').height;

  return (

    <Modal transparent={true} animationType="fade" visible={visible} onRequestClose={onClose}>
        <View style={[styles.modalContenedor, {width: windowWidth * 1, height: windowHeight * 0.9}]}>
          <ScrollView>

            <Text style = {[styles.TextTalleres, {width: windowWidth * 0.9, height: windowHeight * 0.4}]}
            >¡Descubre nuevas oportunidades de aprendizaje con nuestros cursos,
            talleres y conferencias diseñados para promover, inspirar e informar sobre temas de inclusión, 
            diversidad, cultura de paz, sana convivencia y protección a niñas, niños y adolescentes!{"\n"}
            En el Cuerpo Académico Estudios y Procesos de la Educación Inclusiva de la Benemérita 
            Escuela Normal “Manuel Ávila Camacho”, nos enorgullece presentar una selección diversa de 
            programas educativos y sociales cuidadosamente elaborados para brindarte experiencias de aprendizaje 
            relevantes, pertinentes y prácticas que te ayudarán a alcanzar tus metas personales y profesionales. 
            Si deseas contactarte con nosotros, te dejamos los siguientes medios para iniciar comunicación 
            y crear juntos acciones en favor de la inclusión y sobre todo de las niñas, niños y adolescentes.
            </Text>

            <Image  style = {[styles.ImgUno, {width: windowWidth * 0.9, height: windowHeight * 0.38}]}
            source={require("../assets/FigIcon/CA.png")} 
            />
            

           <Text>Correo electrónico:{"\n"}ca_estudios.inclusiva@benmac.edu.mx{"\n\n"}
            Facebook: Cuerpo Académico: Estudios y procesos de la educación inclusiva{"\n\n"}
            Whats app:  492-125-11-18
            </Text> 

            <TouchableOpacity onPress={onClose} style={styles.btnCerrar}>
                <Text style={styles.TextCerrar}>Cerrar</Text>
            </TouchableOpacity>

           </ScrollView> 
        
        </View>
    </Modal>
  )
}

const styles = StyleSheet.create({
    modalContenedor: {
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: "white",
      top:"5%",
      borderRadius: 15,

    },
    btnCerrar: {
      marginTop: 10,
      backgroundColor: "#62acac",
      alignSelf: "center",
      padding: 15,
      borderRadius: 5,
      top: "-1%",
      width: "20%"
    },
    TextCerrar: {
      color: "white",
      fontSize: 13,
      fontWeight: "bold",
      alignSelf: "center",
    },
    TextTalleres: {
        top: "2%",
        margin: "2%",
        textAlign: "justify",
    },
    ImgUno: {
      top: "-5%"
    },
  });

export default ModalTalleres;

