@props([
'imagenes' => [],
])

<div class="relative w-full max-w-4xl mx-auto overflow-hidden rounded-2xl mb-10 group">
    <div class="flex transition-transform duration-500 ease-in-out" id="carousel">
        @foreach($imagenes as $imagen)
        <img src="{{ $imagen }}" class="w-full flex-shrink-0 object-cover aspect-[16/9]" alt="Imagen">
        @endforeach
    </div>

    <!-- Flechas -->
    <div class="absolute top-1/2 left-4 transform -translate-y-1/2 z-10 opacity-0 group-hover:opacity-100 transition">
        <button onclick="prevSlide()"
            class="bg-gray-100 dark:bg-gray-800 text-black dark:text-white p-2 rounded-full shadow hover:bg-gray-300 dark:hover:bg-gray-700">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
        </button>
    </div>
    <div class="absolute top-1/2 right-4 transform -translate-y-1/2 z-10 opacity-0 group-hover:opacity-100 transition">
        <button onclick="nextSlide()"
            class="bg-gray-100 dark:bg-gray-800 text-black dark:text-white p-2 rounded-full shadow hover:bg-gray-300 dark:hover:bg-gray-700">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
        </button>
    </div>
</div>

<script>
    let index = 0;
    const carousel = document.getElementById('carousel');
    const total = carousel.children.length;

    function showSlide(i) {
        index = (i + total) % total;
        carousel.style.transform = `translateX(-${index * 100}%)`;
    }

    function nextSlide() {
        showSlide(index + 1);
    }

    function prevSlide() {
        showSlide(index - 1);
    }
</script>