import { type Book } from './Book';
import { Table, TD, THead, TR } from './BooksList.styles';

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>
      <THead>
        <tr>
          <th>Titel</th>
          <th>Autor</th>
          <th>ISBN</th>
          <th>Bewertung</th>
        </tr>
      </THead>
      <tbody>
        {books.map((book) => {
          return (
            <TR key={book.id}>
              <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;
