import React from 'react';
import { View, Text, SafeAreaView, ScrollView, ImageBackground, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import Feather from '@expo/vector-icons/Feather';

import { windowWidth } from '../utils/Dimensions';

const HomeScreen = ({navigation}) => {
    return (
        <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
            <ScrollView style={{padding: 20}}>
                <View style={styles.wrapper}>
                    <Text style={{fontSize: 18}}>
                        Hello Diligent
                    </Text>
                    <TouchableOpacity onPress={() => navigation.openDrawer()}>
                        <ImageBackground source={require('../assets/images/diligent-purple.png')} style={styles.imageBackground} imageStyle={{borderRadius:25}} />
                    </TouchableOpacity>
                </View>
                <View style={styles.search}>
                    <Feather name='search' size={20} color='#C6C6C6' style={{marginRight: 5}} />
                    <TextInput placeholder='Search' placeholderTextColor='#C6C6C6' />
                </View>
            </ScrollView>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    wrapper: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 20
    },
    imageBackground: {
        width: 35,
        height: 35
    },
    search: {
        flexDirection: 'row',
        borderColor: '#C6C6C6',
        borderWidth: 1,
        borderRadius: 8,
        paddingHorizontal: 10,
        paddingVertical: 8
    }
})

export default HomeScreen;