import React from "react";
import BookCard from "./BookCard";

function BookList({ books, authors, statuses, onEdit, onDelete }) {
  const getAuthorName = (id) => authors.find(a => String(a.id) === String(id))?.name || "Неизвестен";
  const getStatusName = (id) => statuses.find(s => String(s.id) === String(id))?.name || "Нет статуса";

  return (
    <div className="row justify-content-center ">
      {books.map(book => (
        <div
          className="col-12 col-sm-10 col-md-6 col-lg-4 d-flex align-items-stretch mb-4"
          key={book.id}
        >
          <BookCard
            book={book}
            authorName={getAuthorName(book.authorId)}
            statusName={getStatusName(book.statusId)}
            onEdit={onEdit}
            onDelete={onDelete}
          />
        </div>
      ))}
    </div>
  );
}

export default BookList;
