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

import ClearText from './text'

export default class Definition extends Component {
  render() {
    let { labelStyle, contentStyle, label, children, contentIsView, ...others } = this.props
    let content;
    if (contentIsView) {
      content = (
        <View style={[styles.contentView, contentStyle]}>{children}</View>
      )
    }
    else {
      content = (
        <ClearText style={[styles.content, contentStyle]}>{children}</ClearText>
      )
    }
    return (
      <View style={styles.item} {...others}>
        <ClearText style={[styles.label, labelStyle]}>{label}</ClearText>
        {content}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  item: {
    justifyContent: 'flex-start',
    flexDirection: 'row',
    width: '100%',
    paddingBottom: 0,
  },
  label: {
    width: 80,
    minWidth: 80,
    textAlign: 'left',
    color: '#bbb',
  },
  content: {
    flex: 1,
    textAlign: 'left'
  },
  contentView: {
    flex: 1,
  },
})