{{-- 
    Publishing Block: Single Image
    Full-width or contained single image
    
    Block Data Structure:
    {
        "type": "image",
        "image": "path/to/image.jpg",
        "alt": "Alt text",
        "caption": "Image caption",
        "link": "/url",
        "width": "full", // full, wide, content, narrow
        "alignment": "center",
        "style": "default", // default, rounded, bordered, shadowed
        "lightbox": true
    }
--}}
@php
    $width = $block['width'] ?? 'content';
    $alignment = $block['alignment'] ?? 'center';
    $style = $block['style'] ?? 'default';
    $lightbox = $block['lightbox'] ?? false;
    
    $widthClasses = [
        'full' => 'max-w-none -mx-4 sm:-mx-6 lg:-mx-8',
        'wide' => 'max-w-6xl',
        'content' => 'max-w-4xl',
        'narrow' => 'max-w-5xl',
    ];
    
    $alignmentClasses = [
        'left' => 'mr-auto',
        'center' => 'mx-auto',
        'right' => 'ml-auto',
    ];
    
    $styleClasses = [
        'default' => '',
        'rounded' => 'rounded-xl overflow-hidden',
        'bordered' => 'border-4 border-gray-200 rounded-xl',
        'shadowed' => 'rounded-xl shadow-2xl',
    ];
@endphp

<section class="py-8 lg:py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="{{ $widthClasses[$width] ?? 'max-w-4xl' }} {{ $alignmentClasses[$alignment] ?? 'mx-auto' }}">
            
            @if(!empty($block['link']))
                <a href="{{ $block['link'] }}" class="block group">
            @endif
            
            <div class="{{ $styleClasses[$style] ?? '' }} overflow-hidden {{ $lightbox ? 'cursor-pointer' : '' }}"
                 @if($lightbox)
                     x-data
                     @click="$dispatch('open-image-lightbox', { src: '{{ asset('storage/' . $block['image']) }}' })"
                 @endif>
                
                @if(!empty($block['image']))
                    <img src="{{ asset('storage/' . $block['image']) }}" 
                         alt="{{ $block['alt'] ?? $block['caption'] ?? '' }}"
                         class="w-full h-auto {{ $block['link'] ? 'group-hover:scale-[1.02]' : '' }} transition duration-300">
                @endif
                
                {{-- Hover Overlay for Lightbox --}}
                @if($lightbox)
                    <div class="absolute inset-0 bg-black/0 hover:bg-black/20 transition flex items-center justify-center opacity-0 hover:opacity-100">
                        <div class="w-14 h-14 rounded-full bg-white/90 flex items-center justify-center">
                            <i class="fas fa-search-plus text-gray-800 text-xl"></i>
                        </div>
                    </div>
                @endif
            </div>
            
            @if(!empty($block['link']))
                </a>
            @endif
            
            {{-- Caption --}}
            @if(!empty($block['caption']))
                <p class="text-center text-gray-500 text-sm mt-4 italic">
                    {{ $block['caption'] }}
                </p>
            @endif
            
        </div>
    </div>
</section>
