import { NextPage } from 'next';
import Link from 'next/link';
import { books } from '@/books';

const BooksListPage: NextPage = () => {
  return (
    <div>
      <h1>Books List</h1>

      <ul
        style={{
          listStyle: 'none',
        }}
      >
        {books.map((book) => (
          <li key={book.id} style={{ margin: '20px 0' }}>
            <Link href={`/books/${book.id}`}>{book.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default BooksListPage;
