import { lazy, Suspense, useState } from 'react';

const Details = lazy(() => import('./Details'));
const books = [
  {
    id: 1,
    title: 'JavaScript - das umfassende Handbuch',
    author: 'Philip Ackermann',
    isbn: '978-3836286299',
    rating: 5,
  },
  {
    id: 2,
    title: 'Clean Code',
    author: 'Robert Martin',
    isbn: '978-0132350884',
    rating: 4,
  },
  {
    id: 3,
    title: 'Design Patterns',
    author: 'Erich Gamma',
    isbn: '978-0201633610',
    rating: 5,
  },
];
const List: React.FC = () => {
  const [details, setDetails] = useState<number | null>(null);
  return (
    <>
      {books.map((book) => (
        <div key={book.id}>
          {book.title}
          <button onClick={() => setDetails(book.id)}>Details</button>
          <Suspense fallback={<div>...laden</div>}>
            {details === book.id && <Details book={book} />}
          </Suspense>
        </div>
      ))}
    </>
  );
};

export default List;
