Untitled

import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { ChakraProvider, Box, Heading, Spinner, Text } from '@chakra-ui/react';
import { getMatches } from './features/footballMatches/footballMatchesSlice';
import MatchCard from './components/MatchCard';
import SearchBar from './components/SearchBar';
import FilterOptions from './components/FilterOptions';

const App = () => {
  const dispatch = useDispatch();
  const { footballMatches, isLoading, isError } = useSelector((state) => state.footballMatches);
  const [filteredMatches, setFilteredMatches] = useState([]);

  useEffect(() => {
    dispatch(getMatches());
  }, [dispatch]);

  useEffect(() => {
    setFilteredMatches(footballMatches);
  }, [footballMatches]);

  const handleSearch = (query) => {
    setFilteredMatches(footballMatches.filter(match => 
      match.team1.toLowerCase().includes(query.toLowerCase()) || 
      match.team2.toLowerCase().includes(query.toLowerCase()) || 
      match.venue.toLowerCase().includes(query.toLowerCase())
    ));
  };

  const handleFilterChange = (type, value) => {
    setFilteredMatches(footballMatches.filter(match => match[type].includes(value)));
  };

  return (
    <ChakraProvider>
      <Box p={4}>
        <Heading mb={4}>Football Match Tracker</Heading>
        <SearchBar onSearch={handleSearch} />
        <FilterOptions onFilterChange={handleFilterChange} />
        {isLoading ? <Spinner /> : isError ? <Text>Failed to load matches.</Text> : filteredMatches.map(match => (
          <MatchCard key={match.id} match={match} />
        ))}
      </Box>
    </ChakraProvider>
  );
};

export default App;