'use strict';

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

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

export default class SectionItem extends React.Component {

    static propTypes = {
        name: React.PropTypes.string.isRequired,
        onPressSection: React.PropTypes.func,
    };

    constructor(props) {
        super (props);

    }

    render() {
        if (!this.props.name) {
            return null;
        }
        
        return (
            <TouchableOpacity style={styles.container} onPress={() => {
                this.props.onPressSection && this.props.onPressSection();
            }}>
                <Text style={styles.name}>{this.props.name}</Text>
            </TouchableOpacity>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        // alignItems: 'center',
        alignSelf: 'center',
        backgroundColor: '#f2f2f2',
    },
    name: {
        fontSize: 14,
        margin: 4,
    },
});