import React from "react";
import {
  View,
  ImageBackground,
  Text,
  TouchableOpacity,
  StyleSheet,
} from "react-native";
import EntypoIcon from "react-native-vector-icons/Entypo";


function ImageHeader(props) {
  return (
    <View style={imageHeaderStyles.container}>
      <ImageBackground
        source={props.image}
        resizeMode="cover"
        style={{ flex: 1 }}
      >
        <View style={imageHeaderStyles.row}>
          <TouchableOpacity onPress={() => props.navigation.goBack()}>
            <EntypoIcon name="chevron-left" style={imageHeaderStyles.icon}></EntypoIcon>
          </TouchableOpacity>
          <Text style={imageHeaderStyles.text}>{props.text}</Text>
        </View>
      </ImageBackground>
    </View >
  )
}


const imageHeaderStyles = StyleSheet.create({
  container: {
    flex: 1,
    minHeight: 175,
    maxHeight: 175,
    height: 175,
    width: "100%",
  },
  row: {
    paddingTop: 30,
    flexDirection: "row",
  },
  icon: {
    color: "white",
    fontSize: 40,
    paddingRight: 10,
    paddingLeft: 10,
  },
  text: {
    color: "white",
    fontSize: 30,
  },
});

export default ImageHeader;