/** @jsxImportSource @emotion/react */

import { css } from '@emotion/react';
import { type Book } from './Book';

const headerStyle = {
  borderBottom: '3px solid black',
};

const cellStyle = {
  padding: '5px 10px',
};

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 css={{ borderCollapse: 'collapse' }}>
      <thead css={headerStyle}>
        <tr>
          <th>Titel</th>
          <th>Autor</th>
          <th>ISBN</th>
          <th>Bewertung</th>
        </tr>
      </thead>
      <tbody>
        {books.map((book) => {
          return (
            <tr
              key={book.id}
              css={css`
                &:nth-of-type(2n) {
                  background-color: #ddd;
                }
              `}
            >
              <td css={cellStyle}>{book.title}</td>
              <td css={cellStyle}>{book.author}</td>
              <td css={cellStyle}>{book.isbn}</td>
              <td css={cellStyle}>
                {book.rating && <span>{'⭑'.repeat(book.rating)}</span>}
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default BooksList;
