// @flow
import React from 'react';
import { View } from 'react-native';
import Text from '../Text';

export default function (props) {
  const { text, style, leftElement } = props;
  return (
    <View>
      <View
        style={{
          backgroundColor: '#fff',
          flexDirection: 'row',
          alignItems: 'center',
          height: 50,
          paddingLeft: 15,
          ...style,
        }}
      >
        { leftElement ? leftElement() : (
          <View style={{ justifyContent: 'flex-start' }}>
            <Text style={{ fontSize: 14, color: '#666' }}>
              {text}
            </Text>
          </View>
        )
        }
        <View style={{
          flex: 1,
          alignItems: 'flex-end',
          paddingRight: 15,
        }}
        >
          {props.children}
        </View>
      </View>
      <View style={{
        borderBottomColor: '#ccc',
        borderBottomWidth: 0.3,
        marginLeft: 15,
      }}
      />
    </View>
  );
}
