import React, {useState, useEffect} from 'react';
import {StatusBar, FlatList, Text} from 'react-native';
import {SearchBar} from 'react-native-elements';

const footballClubs = [
  'Manaus',
  'Amazonas',
  'Nacional',
  'Fast',
  'Iranduba',
  'Rio Negro',
  'Princesa do Solimões',
  'São Raimundo',
];

const App = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  const handleChange = value => {
    setSearchTerm(value);
  };

  useEffect(() => {
    const results = footballClubs.filter(soccerTeam =>
      soccerTeam.toLowerCase().includes(searchTerm.toLowerCase()),
    );
    setSearchResults(results);
  }, [searchTerm]);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SearchBar
        placeholder="Pesquise por um clube Amazonese"
        onChangeText={handleChange}
        value={searchTerm}
      />
      <FlatList
        data={searchResults}
        renderItem={({item}) => <Text style={{padding: 20}}>{item}</Text>}
        keyExtractor={(item, index) => index.toString()}
      />
    </>
  );
};

export default App;