'use strict';

import React from 'react';
import ReactNative from 'react-native';
import PlainText from './PlainText';

const {
    Component,
} = React;


const {
    View,
    Text,
    Platform,
    StyleSheet,
    Dimensions,
} = ReactNative;


export default class PlainTextSection extends Component {

    static propTypes = {
        containerStyle: View.propTypes.style,
        content: React.PropTypes.arrayOf(
        	React.PropTypes.shape({
      			top: React.PropTypes.string,
      			bottom: React.PropTypes.string,
      			style: View.propTypes.style,
    		})
        ),
    };

	render() {

        return (
            <View style={[styles.container, this.props.containerStyle]}>
            	{this.props.content.map((item, i) => <PlainText
            		key={i}
                    topText={item.top}
                    bottomText={item.bottom}
                    containerStyle={[styles.contentContainerStyle, item.style]}
                />)}
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        backgroundColor: 'white',
        width,
    },
    contentContainerStyle: {
        width: width / 2,
    },

});