'use strict';

import React from 'react';
import ReactNative from 'react-native';

const {
    View,
    Text,
    Image,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
} = ReactNative;

export default class NumberButton extends React.Component {

    static propTypes = {
        source: Image.propTypes.source.isRequired,
        number: React.PropTypes.number.isRequired,
        onPressButton: React.PropTypes.func,
    };

    constructor(props) {
        super (props);

    }

    render() {
        return (
            <TouchableOpacity style={[styles.container, this.props.style]} onPress={() => {
                this.props.onPressButton && this.props.onPressButton();
            }}>
                <Image style={styles.image} source={this.props.source} resizeMode={'contain'}/>
                <Text style={styles.number}>{this.props.number}</Text>
            </TouchableOpacity>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        // alignSelf: 'center',
        justifyContent: 'center',
        // backgroundColor: '#f2f2f2',
        // paddingHorizontal: 10,
    },
    image: {
        width: 18,
        height: 18,
    },
    number: {
        color: '#b0b0b0',
        fontSize: 14,
        marginLeft: 5,
    },
});