import React, {useState} from 'react';
import {
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  TouchableHighlight,
} from 'react-native';
import {Icon} from 'react-native-elements';

const HomeScreen = ({navigation}) => {
  const [token, setToken] = useState('');

  return (
    <>
      <StatusBar backgroundColor="#ffffff" barStyle="dark-content" />
      <View style={styles.viewRoot}>
        <Text style={styles.heading}>Rental</Text>
        <View
          style={{flexDirection: 'row', marginTop: '30%', marginLeft: '15%'}}>
          <TouchableHighlight
            onPress={() => navigation.navigate('SearchHouse')}
						>
            <Icon
              name="home-outline"
              style={styles.icon}
              type="ionicon"
              size={46}
              color="#206ba5"
            />
          </TouchableHighlight>
            <Text style={{color: '#206ba5', fontSize: 25, marginLeft: '-10%'}}>
              Home
            </Text>
        </View>
        <View
          style={{flexDirection: 'row', marginTop: '30%', marginLeft: '15%'}}>
          <Icon
            name="key"
            type="feather"
            style={styles.icon}
            size={46}
            color="#206ba5"
          />
          <Text style={{color: '#206ba5', fontSize: 25, marginLeft: '-10%'}}>
            Key
          </Text>
        </View>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  viewRoot: {
    backgroundColor: '#ffffff',
    height: '100%',
  },
  heading: {
    color: '#206ba5',
    fontSize: 60,
    textAlign: 'center',
    marginTop: '40%',
    fontFamily: 'Ubuntu-Bold',
  },
  icon: {
    alignSelf: 'flex-start',
    marginLeft: '28%',
    flexDirection: 'row',
  },
});

export default HomeScreen;