import { useState } from "react";

// A component, preserved as readable source code.
export default function ReadingList({ books }) {
  const [query, setQuery] = useState("");
  const matches = books.filter((book) =>
    book.title.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <section aria-label="Reading list">
      <h1>A little room for reading</h1>
      <label>
        Find a book
        <input
          value={query}
          onChange={(event) => setQuery(event.target.value)}
        />
      </label>
      <ul>
        {matches.map((book) => (
          <li key={book.id}>{book.title}</li>
        ))}
      </ul>
    </section>
  );
}