import React from "react";
import StatusLabel from "./StatusLabel";
import { Link } from "react-router-dom";

function BookCard({ book, authorName, statusName, onEdit, onDelete }) {
  return (
    <div className="card card-hover mb-3 w-100" style={{ maxWidth: "450px", margin: "0 auto" }}>
        <Link to={`/manga/${book.id}`}>
        <img
            src={book.cover || "https://placehold.co/200x300"}
            className="card-img-top shadow mt-2 mb-3"
            alt="Обложка книги"
            style={{ maxHeight: "300px", objectFit: "contain" }}
        />
      </Link>
      <div className="card-body">
        <h5 className="card-title">{book.title}</h5>
        <p className="card-text">{book.description}</p>
        <p className="card-text"><small>Автор: {authorName}</small></p>
        <p className="card-text"><StatusLabel statusName={statusName} /></p>
        <button className="btn btn-warning me-2" onClick={() => onEdit(book)}>
          Редактировать
        </button>
        <button className="btn btn-danger" onClick={() => onDelete(book.id)}>
          Удалить
        </button>
      </div>
    </div>
  );
}

export default BookCard;
