import React from 'react';
import { type Book } from './Book';

type Props = {
  book: Book;
  onRate: (bookId: number, rating: number) => void;
};

const BooksListItem: React.FC<Props> = ({ book, onRate }) => {
  return (
    <tr>
      <td>{book.title}</td>
      <td>{book.author}</td>
      <td>{book.isbn}</td>
      <td>
        {Array(5)
          .fill('')
          .map((_, index) => (
            <button key={index} onClick={() => onRate(book.id, index + 1)}>
              {book.rating < index + 1 ? '\u2606' : '\u2605'}
            </button>
          ))}
      </td>
    </tr>
  );
};

export default BooksListItem;
