import { Book } from '@/books/Book';
import SearchInput from '@/books/SearchInput';
import { NextPage } from 'next';

type BooksPageProps = {
  searchParams: Promise<{ query?: string }>;
};

async function getBooks(): Promise<Book[]> {
  const response = await fetch('http://localhost:3001/books');
  return response.json();
}

const BooksPage: NextPage<BooksPageProps> = async ({ searchParams }) => {
  const { query } = await searchParams;

  const books = await getBooks();
  const filtered = query
    ? books.filter((b) => b.title.toLowerCase().includes(query.toLowerCase()))
    : books;

  return (
    <div>
      <h1>Bücher</h1>
      <SearchInput />
      <ul>
        {filtered.map((book) => (
          <li key={book.id}>{book.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default BooksPage;
