import './App.css';
import BooksList from './BooksList';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ErrorBoundary } from 'react-error-boundary';
import { Suspense } from 'react';

const queryClient = new QueryClient();

const App: React.FC = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <h1>Bücherverwaltung</h1>
      <ErrorBoundary fallback={<div>Ein Fehler ist aufgetreten.</div>}>
        <Suspense fallback={<div>Lade Bücher...</div>}>
          <BooksList />
        </Suspense>
      </ErrorBoundary>
    </QueryClientProvider>
  );
};

export default App;

