@props(['pdf'])

<div class="bg-gray-100 rounded-lg overflow-hidden pdf-viewer-container">
    <div class="w-full">
        <object 
            data="{{ asset('storage/' . $pdf) }}" 
            type="application/pdf" 
            class="w-full" 
            style="min-height: 600px; height: 80vh;"
            id="pdf-canvas"
        >
            <div class="flex flex-col items-center justify-center p-6 text-center">
                <p class="text-gray-700 mb-4">Trình duyệt của bạn không thể hiển thị PDF trực tiếp.</p>
                <a href="{{ asset('storage/' . $pdf) }}" 
                    class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md transition-colors duration-300"
                    download
                    target="_blank">
                    Tải xuống PDF
                </a>
            </div>
        </object>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const pdfObject = document.getElementById('pdf-canvas');
        if (pdfObject) {
            pdfObject.classList.add('loading');
            pdfObject.addEventListener('load', function() {
                pdfObject.classList.remove('loading');
            });
        }
    });
</script>