import React from 'react'
import { View, TouchableOpacity, Image, TextStyle, ViewStyle, ImageStyle, ImageSourcePropType, StyleSheet, } from 'react-native'
import c from '../../color/colors'
import t from '../../translator/translator'


import { MyText, } from '../texts'


type Props = {
    containerViewStyle: ViewStyle,
    titleTextStyle: TextStyle,
    title: String,
    onPress: () => void,

    leftImg: ImageSourcePropType,
    leftImgStyle: ImageStyle,
    rightImg: ImageSourcePropType,
    rightImgStyle: ImageStyle,
}


export default BtnWithImgsView = (props: Props) =>
{
    return (
        <View style={ [styles.container, props.containerViewStyle] }>
            <TouchableOpacity
                style = { styles.btn }
                onPress = { props.onPress }
            >
                {
                    props.leftImg
                    &&
                    <Image
                        style = { [styles.leftImg, props.leftImgStyle] }
                        source = { props.leftImg }
                    />
                }
                <MyText style={ [styles.btnText, props.titleTextStyle] }>{ props.title }</MyText>
                {
                    props.rightImg
                    &&
                    <Image
                        style = { [styles.rightImg, props.rightImgStyle] }
                        source = { props.rightImg }
                    />
                }
            </TouchableOpacity>
        </View>
    )
}
BtnWithImgsView.defaultProps = {

}



const styles = StyleSheet.create({
    container: {

    },
    btn: {
        height: 48,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: c().main_yellow,
        borderRadius: 16,
    },
    btnText: {
        paddingHorizontal: 5,
        fontSize: 12,
        fontWeight: 'bold',
    },

    leftImg: {
        tintColor: c().main_black,
    },
    rightImg: {
        tintColor: c().main_black,
    },
})
