import Image from 'next/image'

import style from './BookListItem.module.css'
import Link from 'next/link'

export default function BookListItem ({ href, title, author, stars, readDate, url, thumbnailUrl, tags, review }) {
  return (
    <div className={style.item}>
      <div className={style['image-container']}>
        <Link href={href}>
          <Image src={thumbnailUrl ?? '/img/book-placeholder.jpg'} alt={`Book cover for ${title}`} width={300} height={464} />
        </Link>
      </div>
      <div>
        <h2 className={style.heading}>
          <Link href={href}>{title}</Link>
        </h2>
        <p className={style.author}>{author}</p>
        <p>{tags}</p>
        <p>{stars}/5</p>
      </div>
    </div>
  )
}
