import { type Book } from './Book';
import './BooksList.css';

const books: Book[] = [
  {
    id: 1,
    title: 'JavaScript - das umfassende Handbuch',
    author: 'Philip Ackermann',
    isbn: '978-3836286299',
    rating: 5,
  },
  {
    id: 2,
    title: 'Clean Code',
    author: 'Robert Martin',
    isbn: '978-0132350884',
    rating: 4,
  },
  {
    id: 3,
    title: 'Design Patterns',
    author: 'Erich Gamma',
    isbn: '978-0201633610',
    rating: 5,
  },
];
const BooksList: React.FC = () => {
  return (
    <table className="BooksList">
      <thead>
        <tr>
          <th>Titel</th>
          <th>Autor</th>
          <th>ISBN</th>
          <th>Bewertung</th>
        </tr>
      </thead>
      <tbody>
        {books.map((book) => {
          const classNames = ['book'];
          if (book.rating === 5) {
            classNames.push('highlight');
          }

          return (
            <tr key={book.id} className={classNames.join(' ')}>
              <td>{book.title}</td>
              <td>{book.author}</td>
              <td>{book.isbn}</td>
              <td>{book.rating && <span>{'⭑'.repeat(book.rating)}</span>}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default BooksList;
