import { type Book } from './Book';
import { useParams } from 'react-router';

type Props = {
  books: Book[];
};

const Details: React.FC<Props> = ({ books }) => {
  const id = parseInt(useParams<{ id: string }>().id!, 10);
  const book = books.find((b) => b.id === id);

  if (!book) {
    return <div>Keine Daten gefunden</div>;
  }

  return (
    <table>
      <tbody>
        <tr>
          <th>Titel: </th>
          <td>{book.title}</td>
        </tr>
        <tr>
          <th>Autor: </th>
          <td>{book.author}</td>
        </tr>
        <tr>
          <th>ISBN: </th>
          <td>{book.isbn}</td>
        </tr>
        <tr>
          <th>Bewertung: </th>
          <td>{book.rating}</td>
        </tr>
      </tbody>
    </table>
  );
};

export default Details;
