{{-- 
    Publishing Block: Spacer
    Empty space for visual separation
    
    Block Data Structure:
    {
        "type": "spacer",
        "height": "default", // small, default, large, xlarge, custom
        "custom_height": "100px",
        "show_divider": false,
        "background": "transparent", // transparent, white, gray, pattern
        "mobile_hidden": false
    }
--}}
@php
    $height = $block['height'] ?? 'default';
    $customHeight = $block['custom_height'] ?? null;
    $showDivider = $block['show_divider'] ?? false;
    $background = $block['background'] ?? 'transparent';
    $mobileHidden = $block['mobile_hidden'] ?? false;
    
    $heightClasses = [
        'small' => 'h-8 lg:h-12',
        'default' => 'h-16 lg:h-24',
        'large' => 'h-24 lg:h-32',
        'xlarge' => 'h-32 lg:h-48',
    ];
    
    $backgroundClasses = [
        'transparent' => '',
        'white' => 'bg-white',
        'gray' => 'bg-gray-50',
        'pattern' => 'bg-gray-50 bg-opacity-50',
    ];
@endphp

<div class="{{ $backgroundClasses[$background] ?? '' }} {{ $mobileHidden ? 'hidden lg:block' : '' }}"
     @if($height === 'custom' && $customHeight)
         style="height: {{ $customHeight }};"
     @else
         class="{{ $heightClasses[$height] ?? 'h-16 lg:h-24' }}"
     @endif>
    
    @if($showDivider)
        <div class="h-px bg-gray-200 w-full"></div>
    @endif
    
    @if($background === 'pattern')
        <div class="absolute inset-0 opacity-5" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;%239C92AC&quot; fill-opacity=&quot;0.4&quot; fill-rule=&quot;evenodd&quot;%3E%3Ccircle cx=&quot;3&quot; cy=&quot;3&quot; r=&quot;3&quot;/%3E%3Ccircle cx=&quot;13&quot; cy=&quot;13&quot; r=&quot;3&quot;/%3E%3C/g%3E%3C/svg%3E');"></div>
    @endif
    
</div>
