import { useNavigation } from '@react-navigation/native';
import React from 'react'
import { View, Text, StyleSheet, Pressable, ImageBackground } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
export const LandingDosBotones = () => {
    
const navigate = useNavigation<any>();
    return (
        <>
        <ImageBackground style={styles.image} source={{ uri: 'https://www.pichincha.pe/sites/default/files/2020-05/001-banner-interno-banca-por-internet.jpg' }} resizeMode="cover" >
            <Text style={styles.titulos} >Nuestros Servicios </Text>
            <View style={styles.container}>
                <Pressable onPress={()=>navigate.navigate("CamaraQrNavigate")} style={styles.botones}>
                    <Icon name="qrcode" size={25} color="#572364" />
                    <Text style={styles.textos}>Codigo QR</Text></Pressable>
                <Pressable onPress={()=>navigate.navigate("ContactosPagar")} style={styles.botones}>
                    <Icon name="money" size={25} color="#572364" />
                    <Text style={styles.textos}>Transacciones</Text>
                </Pressable>
            </View>
        </ImageBackground></>
    )
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: 700,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',

    },
    image: {
        width: '100%',
        height: '100%',
        alignItems: 'center',

    },
    botones: {
        margin: 50,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FFFFFe',
        width: 150,
        height: 150,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.23,
        shadowRadius: 2.62,

        elevation: 4,

    },
    titulos: {
        display: 'flex',
        width: '100%',
        padding: 10,
        textAlign: 'center',
        fontSize: 20,
        backgroundColor: '#572364',
        color: 'white',
    },
    textos: {
        fontSize: 15,
        color: '#572364',
        fontweight: 'bold',
    }
});