import { useState, useDeferredValue } from 'react';
import BooksList from './BooksList';

const App: React.FC = () => {
  const [searchString, setSearchString] = useState('');

  const deferredSearchString = useDeferredValue(searchString);

  const isStale = deferredSearchString !== searchString;

  return (
    <div>
      <h2>Bücher-Suche</h2>

      <input
        type="text"
        placeholder="Titel eingeben..."
        value={searchString}
        onChange={(event) => setSearchString(event.target.value)}
      />

      {isStale && <p>Aktualisiere Liste ...</p>}

      <BooksList searchString={deferredSearchString} />
    </div>
  );
};

export default App;

