import { NextPage } from 'next';
import Image from 'next/image';

const books = [
  {
    id: 1,
    title: 'The Art of Learning',
    author: 'Josh Waitzkin',
    cover: '/blue.png',
  },
  {
    id: 2,
    title: 'Clean Code',
    author: 'Robert C. Martin',
    cover: '/cyan.png',
  },
  {
    id: 3,
    title: 'Atomic Habits',
    author: 'James Clear',
    cover: '/gray.png',
  },
  {
    id: 4,
    title: 'Deep Work',
    author: 'Cal Newport',
    cover: '/green.png',
  },
  {
    id: 5,
    title: 'Refactoring',
    author: 'Martin Fowler',
    cover: '/orange.png',
  },
  {
    id: 6,
    title: 'Designing Data-Intensive Applications',
    author: 'Martin Kleppmann',
    cover: '/pink.png',
  },
  {
    id: 7,
    title: 'The Pragmatic Programmer',
    author: 'Hunt & Thomas',
    cover: '/purple.png',
  },
  {
    id: 8,
    title: "You Don't Know JS",
    author: 'Kyle Simpson',
    cover: '/red.png',
  },
  {
    id: 9,
    title: 'Domain-Driven Design',
    author: 'Eric Evans',
    cover: '/yellow.png',
  },
];

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

      <ul
        style={{
          listStyle: 'none',
        }}
      >
        {books.map((book) => (
          <li
            key={book.id}
            style={{
              margin: '0.5em',
              display: 'flex',
              gap: '1em',
            }}
          >
            <Image
              src={book.cover}
              alt={book.title}
              width={250}
              height={250}
              placeholder="blur"
              blurDataURL="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjE1IiBmaWxsPSIjZGRkIi8+PC9zdmc+"
              sizes="
                (max-width: 640px) 100px,
                (max-width: 1024px) 150px,
                200px
              "
              style={{
                height: 'auto',
                borderRadius: 8,
                objectFit: 'cover',
              }}
              loading="lazy"
            />

            <div>
              <h3>{book.title}</h3>
              <p>{book.author}</p>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default BooksListPage;
