@props(['image'])

@if($image && $image->original_path)
    <figure class="relative w-full flex justify-center items-center my-6">
        <picture>

            {{-- Small image for mobile --}}
            @if(!empty($image->small_path))
                <source srcset="{{ asset('storage/' . $image->small_path) }}" media="(max-width: 600px)">
            @endif

            {{-- Medium image for tablet --}}
            @if(!empty($image->medium_path))
                <source srcset="{{ asset('storage/' . $image->medium_path) }}" media="(max-width: 1200px)">
            @endif

            {{-- Default/original image --}}
            <img
                src="{{ asset('storage/' . $image->original_path) }}"
                alt="{{ $image->alt_text ?? $image->caption ?? $image->title ?? 'Image' }}"
                class="rounded-xl shadow max-w-full h-auto object-contain"
                loading="lazy"
            >
        </picture>
        @if(!empty($image->caption))
            <figcaption>{{ $image->caption }}</figcaption>
        @endif
    </figure>
@endif