import PropTypes from 'prop-types';

export default function BookCard({ book, onSelect }) {
  return (
    <button type="button" className="book-card" onClick={() => onSelect?.(book)}>
      {book.thumbImage && (
        <img src={book.thumbImage} alt={book.title} className="book-thumb" />
      )}
      <div className="book-info">
        <h3>{book.title}</h3>
        <p className="book-meta">{book.authorName || 'Unknown author'}</p>
        <p className="book-meta">
          {book.page ? `${book.page} pages` : 'Page count N/A'} · {book.rate ? `${book.rate} ★` : 'No rating'}
        </p>
      </div>
    </button>
  );
}

BookCard.propTypes = {
  book: PropTypes.shape({
    title: PropTypes.string,
    authorName: PropTypes.string,
    page: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    rate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    thumbImage: PropTypes.string
  }).isRequired,
  onSelect: PropTypes.func
};

BookCard.defaultProps = {
  onSelect: undefined
};
