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 data-testid="title">{book.title}</td>
      <td data-testid="author">{book.author}</td>
      <td data-testid="isbn">{book.isbn}</td>
      <td>
        {Array(5)
          .fill('')
          .map((_, index) => (
            <button
              key={index}
              onClick={() => onRate(book.id, index + 1)}
              data-testid={`rate-${index + 1}`}
            >
              {book.rating < index + 1 ? '\u2606' : '\u2605'}
            </button>
          ))}
      </td>
    </tr>
  );
};

export default BooksListItem;
