import { createFileRoute, Link } from '@tanstack/react-router';
import { books } from '../../books';

export const Route = createFileRoute('/books/')({
  component: RouteComponent,
  loader: async () => {
    return Promise.resolve(books);
  },
});

function RouteComponent() {
  const books = Route.useLoaderData();

  return (
    <div>
      <h1>Books</h1>
      <ul>
        {books.map((book) => (
          <li key={book.id}>
            {/* <Link to={`/books/$bookId`} params={{ bookId: book.id }}> */}
            {book.title} by {book.author}
            {/* </Link> */}
          </li>
        ))}
      </ul>
    </div>
  );
}

