@props([
    'path' => null,
    'alt' => '',
    'ratio' => '4 / 3',
    'lightbox' => null,
    'placeholder' => 'images/placeholders/machine-placeholder.png',
])

@php
    use Illuminate\Support\Facades\Storage;
    $url = Storage::url($path ?? $placeholder);
@endphp

@once
    @push('styles')
        <style>
            /* Formato horizontal uniforme para todas las imágenes de máquina usada */
            .um-image-frame {
                position: relative;
                width: 100%;
                overflow: hidden;
                background-color: #f5f5f5;
                border-radius: 8px;
            }

            .um-image-frame > a,
            .um-image-frame > img {
                display: block;
                width: 100%;
                height: 100%;
            }

            .um-image-frame img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.35s ease;
            }

            .um-image-frame:hover img {
                transform: scale(1.05);
            }
        </style>
    @endpush
@endonce

<div {{ $attributes->merge(['class' => 'um-image-frame']) }} style="aspect-ratio: {{ $ratio }};">
    @if ($lightbox)
        <a href="{{ $url }}" class="glightbox" data-gallery="{{ $lightbox }}">
            <img src="{{ $url }}" alt="{{ $alt }}" loading="lazy" />
        </a>
    @else
        <img src="{{ $url }}" alt="{{ $alt }}" loading="lazy" />
    @endif
</div>