@props([
    'mediaItem', // Objeto Media (o similar que tenga getUrl()) o string de URL
    'size' => 'small', // 'small' (1x1) o 'large' (2x2)
    'link' => '#', // Enlace para el botón "COMPRAR AHORA"
    'odd' => true,
])

@php
    $imageUrl = Storage::url($mediaItem['image']);

    $containerClasses = 'relative group';
    if ($size === 'large') {
        $containerClasses .= ' col-span-2 row-span-2';
        if ($odd) {
            $containerClasses .= ' col-start-1 row-start-1';
        } else {
            $containerClasses .= ' col-start-4 row-start-1';
        }
    } else {
        $containerClasses .= ' col-span-1 row-span-1';
    }
@endphp

@if ($imageUrl)
    <div class="{{ $containerClasses }}">
        <img src="{{ $imageUrl }}" alt="Imagen del look" class="w-full h-full object-cover">
        <a href="{{ $link }}"
            class="absolute inset-0 bg-black bg-opacity-40 flex justify-center items-center opacity-0 group-hover:opacity-80 transition-all duration-500">
            <div
                class="flex flex-col items-center text-center mt-4 bg-gray-700 text-white px-4 py-2 rounded font-semibold transform -translate-y-full group-hover:translate-y-0 transition-all duration-500">
                @svg('fas-shopping-cart', 'w-6 h-6 inline mr-2')
                COMPRAR AHORA
            </div>
        </a>
    </div>
@endif