import React from 'react';
import {View, Text} from 'react-native';
import {Colors} from 'react-native-paper';
import Icon from 'react-native-vector-icons/Ionicons';
// Add styles
import {styles} from './Header.css.js';

const Header = props => {
  return (
    <View style={{width: '100%'}}>
      <View style={[styles.headerBox, {justifyContent: 'space-between'}]}>
        <View style={{flexDirection: 'row'}}>
          <Icon
            onPress={props.onPressBack}
            name="ios-arrow-back"
            color={Colors.red100}
            size={28}
            style={{marginTop: 5, marginLeft: 5}}
          />
          <View style={styles.storeName}>
            <Text style={styles.storeNameText}>{props.title}</Text>
          </View>
        </View>

        <View style={{flexDirection: 'row'}}>
          {props.children}
        </View>
      </View>
    </View>
  );
};

export default Header;