import { getAllBooks } from './books.api';
import { useQuery } from '@tanstack/react-query';

const BooksList: React.FC = () => {
  const {
    isPending,
    error,
    data: books,
  } = useQuery({
    queryKey: ['books'],
    queryFn: getAllBooks,
  });

  if (isPending) {
    return <div>Lade Bücher...</div>;
  } else if (error) {
    return <div>{error.message}</div>;
  } else if (books.length === 0) {
    return <div>Keine Bücher gefunden</div>;
  } else {
    return (
      <table>
        <thead>
          <tr>
            <th>Titel</th>
            <th>Autor</th>
            <th>ISBN</th>
          </tr>
        </thead>
        <tbody>
          {books.map((book) => (
            <tr key={book.id}>
              <td>{book.title}</td>
              <td>{book.author}</td>
              <td>{book.isbn}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
};

export default BooksList;
