text: import React, { useState, useEffect } from 'react';
  import { Feather } from '@expo/vector-icons'
  import { View, FlatList, Image, Text, TouchableOpacity } from 'react-native';
  import { useNavigation } from '@react-navigation/native';
  import logoImg from '../../assets/logo.png';
  import styles from './styles';
  import api from '../../services/api';
  
  import axios from 'axios'
  
  export default function Incidents() {
  
      const [incidents, setIncidents] = useState([]);
      const navigation = useNavigation();
      const [total, setTotal] = useState(0);
      const [page, setPage] = useState(1);
      const [loading, setLoading] = useState(false);
  
      function navigateToDetail(incident) {
          navigation.navigate('Detail', { incident });
      }
  
      async function loadIncidents() {
          if (loading) {
              return;
          }
  
          if (total > 0 && incidents.length == total) {
              return;
          }
  
          setLoading(true);
  
          const response = await axios.get('http://192.168.15.3:3333/incidents', {
              params: { page }
          });
  
          setIncidents([...incidents, ...response.data]);
          setTotal(response.headers['x-total-count']);
          setPage(page + 1);
          setLoading(false);
      }
  
      useEffect(() => {
          loadIncidents();
      }, []);
  
      return (
          <View style={styles.container} >
              <View stye={styles.header}>
                  <Image source={logoImg} />
                  <Text style={styles.headerText}>
                      Total  <Text style={styles.headerTextBold}>{total} de casos </Text>
                  </Text>
  
                  <Text style={styles.title}>Bem-Vindo</Text>
                  <Text style={styles.description}>Escolha um dos casos abaixo e salve o dia</Text>
  
                  <FlatList
                      data={incidents}
                      keyExtractor={incident => String(incident.id)}
                      style={styles.incidentsList}
                      showsVerticalScrollIndicator={false}
                      onEndReached={loadIncidents}
                      onEndReachedThreshold={0.2}
                      renderItem={({ item: incident }) => (
                          <View style={styles.incident}>
                              <Text style={styles.incidentProperty}>ONG:</Text>
                              <Text style={styles.incidentValue}>{incident.name}</Text>
  
                              <Text style={styles.incidentProperty}>CASO:</Text>
                              <Text style={styles.incidentValue}>{incident.title}</Text>
  
                              <Text style={styles.incidentProperty}>VALOR:</Text>
                              <Text style={styles.incidentValue}>{
                                  Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' })
                                      .format(incident.value)}</Text>
  
                              <TouchableOpacity style={styles.detailsButton}
                                  onPress={() => navigateToDetail(incident)}>
                                  <Text style={styles.detailsButtonText}>Ver mais detalhes</Text>
                                  <Feather name="arrow-right" size={16} color="#E02841" />
  
                              </TouchableOpacity>
                          </View>
                      )}
                  />
              </View>
          </View>
      );
  }