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

import Heading from '../components/heading'

export default class Container extends Component {
  constructor() {
    super()
  }
  render() {
    const { heading, style, bodyStyle, headingOnPress, ...props } = this.props
    let headingEl;
    if (heading) {
      headingEl = (
        <Heading style={styles.heading} onPress={headingOnPress}>
          {heading.toUpperCase()}
        </Heading>
      )
    }
    else {
      headingEl = null
    }
    return (
      <View style={[styles.container, style]} {...props}>
        {headingEl}
        <View style={[styles.body, bodyStyle]}>
          {this.props.children}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
  },
  heading: {
  },
  body: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    paddingLeft: 10,
  }
})