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

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

  return (
    <>
      <StatusBar backgroundColor="#fffff2" barStyle="dark-content" />
      <View style={styles.viewRoot}>
        <Text style={styles.heading}>Rental</Text>
        <View
          style={{flexDirection: 'row', marginTop: '30%', marginLeft: '15%'}}>
          <Icon
            name="home-outline"
            style={styles.icon}
            type="ionicon"
            size={46}
            color="#206ba5"
          />
          <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: '#fffff2',
    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;