import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
} from 'react-native';



export default class Button extends React.Component {


    render() {

        if (!this.props.visible) {
            return false;
        }
        if (!this.props.label) {
            return false;
        }
        if (!this.props.onClick) {
            return false;
        }

        return (
            <View style={styles.component}>
                <View style={styles.layouts}>
                    <View style={styles.layout}>
                        <View style={styles.itemcontainer}>
                            <View style={styles.itemcontainerInner}>
                                <TouchableOpacity
                                    style={styles.chocolate}
                                    onPress={this.props.onClick}
                                >
                                    <Text style={styles.item1TouchableOpacity}>
                                        {this.props.label}
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    component: {
        width: '100%',
        flexDirection: 'row',
        paddingLeft: 7.5,
        paddingRight: 7.5,
        paddingTop: 7.5,
        paddingBottom: 7.5,
    },

    layouts: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },

    layout: {
        width: '100%',
        height: 90,
    },

    itemcontainer: {
        width: '100%',
        height: '100%',
        paddingTop: 7.5,
        paddingBottom: 7.5,
        paddingLeft: 7.5,
        paddingRight: 7.5,
    },

    itemcontainerInner: {
        width: '100%',
        height: '100%',
        position: 'relative',
        alignItems: 'center',
        justifyContent: 'center',
    },

    chocolate: {
        backgroundColor: '#1194f6',
        borderWidth: 0,
        borderColor: '#eee',
        borderStyle: 'solid',
        borderRadius: 4,
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        overflow: 'hidden',
        padding: 10,
    },

    buttonText: {
        color: '#fff',
        fontSize: 14,
        textAlign: 'center',
        width: '100%',
    },

});