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

const styles = StyleSheet.create({
  header: {
    paddingHorizontal: 16,
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center"
  },
  input: {
    flex: 1,
    height: 50
  }
});

class Header extends Component {
  render() {
    return (
      <View style={styles.header}>
        <TextInput
          blurOnSubmit={false}
          onChangeText={this.props.onChange}
          onSubmitEditing={this.props.onAddItem}
          placeholder="What needs to be done?"
          returnKeyType="done"
          style={styles.input}
          value={this.props.value}
        />
      </View>
    );
  }
}

export default Header;