@props(['buku'])

<div class="card border-0 shadow-sm h-100 book-card bg-info-light">
    <div class="row g-0 h-100">
        <div class="col-4">
            <div class="book-cover-container d-flex align-items-center justify-content-center p-3 h-100">
                <img src="{{ asset($buku['cover']) }}" class="img-fluid rounded shadow-sm book-cover" alt="Cover {{ $buku['judul'] }}">
            </div>
        </div>
        <div class="col-8">
            <div class="card-body d-flex flex-column h-100 p-3">
                <div class="flex-grow-1">
                    <h6 class="card-title fw-bold text-dark mb-2 line-clamp-2">
                        {{ $buku['judul'] }}
                    </h6>
                    <p class="card-subtitle text-muted small mb-3">
                        <i class="bi bi-person-fill me-1"></i>{{ $buku['penulis'] }}
                    </p>
                </div>
                <div class="mt-auto">
                    {{ $slot }}
                </div>
            </div>
        </div>
    </div>
</div>