//Modules
import React from 'react';
import { View, Text, StyleSheet, ImageBackground, Image, TextInput } from 'react-native';
const image = { uri: "https://reactjs.org/logo-og.png" };

class Hero extends React.Component {
    constructor (props) {
        super(props);
    }
    render() {
        return (
            <View>
                <ImageBackground style={Styles.image} source={require('../Images/Stock.png')}>
                    <View>
                        <Text style={Styles.HeroHeading}>{this.props.HeroHeading}</Text>
                        <Text style={Styles.HeroText}>{this.props.HeroText}</Text>
                    </View>
                </ImageBackground>
            </View>
                
        );
    }
}

const HeroSearch = (props) => {
    const [SearchBar, onChangeSearch] = React.useState('');
        return (
            <View>
                <ImageBackground style={Styles.image} source={require('../Images/Stock.png')}>
                    <View style={Styles.InputContainer}>
                        <TextInput 
                         style={Styles.Input} 
                         onChangeText={text => onChangeSearch(text)}
                         placeholder="Zoek"
                         placeholderTextColor="#DE0000"
                         value={SearchBar}
                        />
                    </View>
                </ImageBackground>
            </View>
                
        );
    
}

const Styles = StyleSheet.create ({
    image: {
        resizeMode: "cover",
        width: '100%',
        backgroundColor: "#DE0000a0",
      },
    HeroHeading: {
        color: "white",
        fontSize: 30,
        textAlign: "center",
        backgroundColor: "#DE0000a0",
        paddingTop: 10,
    },
    HeroText: {
        color: "white",
        backgroundColor: "#DE0000a0",
        textAlign: "center",
        height: 55,
    },
    InputContainer: {
        height: 100,
        backgroundColor: "#DE0000a0",
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    Input: {
        height: 40,
        backgroundColor: '#ffffff',
        width: '60%',
        paddingHorizontal: 10,
    }
})

export {HeroSearch};
export default Hero;