import React, { Component } from 'react'
import Book from './Book'

class BookShelf extends Component {
    returnBookComponent(array) {
        return array.map((item) => {
            return (
                <li>
                    <Book
                        title={item.title}
                        authors={item.authors}
                        image={item.imageLinks.thumbnail}
                    />
                </li>
            )
        })
    }

    render () {
        const currentlyReading = this.props.currentlyReading
        return (
            <div className="bookshelf">
                <h2 className="bookshelf-title">{this.props.title}</h2>
                <div className="bookshelf-books">
                    <ol className="books-grid">
                        {this.returnBookComponent(currentlyReading)}
                    </ol>
                </div>
            </div>

        )
    }
}

export default BookShelf