import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
import { getEmployees } from './services/employeeService';

export default function App() {
  const [employees, setEmployees] = useState([]);

  useEffect(() => {
    getEmployees().then( data => setEmployees(data))
  }, [])

  return (
    <View style={styles.container}>      
      <Text></Text>
      <FlatList 
        data={employees}
        renderItem={({item}) => (
          <View style={styles.list}>
            <Text style={styles.listText}>{item.name}</Text>
          </View>
        )}
      />
      
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  list: {
    backgroundColor: '#ddd',
    padding: 15,
    borderRadius: 5,
    width: '90%',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: 15,
    boxShadow: '2px 2px 2px black',
  },
  listText: {
    fontSize: 18
  },
});