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

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


type Props = {
    onPress: () => void,
}


export default AddOneMoreBtnView = (props: Props) =>
{
    return (
        <View style={ styles.container }>
            <TouchableOpacity
                style = { styles.addMoreBtn }
                onPress = { props.onPress }
                hitSlop = { {
                    top: 5,
                    bottom: 5,
                } }
            >
                <Image
                    style = { styles.addMoreBtnImg }
                    source = { require('../../../../../assets/icons/common/plus_icon.png') }
                />
                <MyText style = { styles.addMoreBtnText }>{ t().Add_one_more_notification() }</MyText>
            </TouchableOpacity>
        </View>
    )
}
AddOneMoreBtnView.defaultProps = {

}



const styles = StyleSheet.create({
    container: {

    },
    addMoreBtn: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    addMoreBtnImg: {
        tintColor: c().main_yellow,
    },
    addMoreBtnText: {
        marginLeft: 12,
        fontWeight: 'bold',
        color: c().main_yellow,
    },
})
