{{-- 
    Publishing Block: Divider
    Visual separator between sections
    
    Block Data Structure:
    {
        "type": "divider",
        "style": "default", // default, gradient, dashed, dotted, double, wavy
        "color": "#10b981",
        "width": "full", // full, wide, narrow
        "thickness": "default", // thin, default, thick
        "with_icon": false,
        "icon": "star",
        "margin": "default" // small, default, large
    }
--}}
@php
    $style = $block['style'] ?? 'default';
    $color = $block['color'] ?? '#e5e7eb';
    $width = $block['width'] ?? 'full';
    $thickness = $block['thickness'] ?? 'default';
    $withIcon = $block['with_icon'] ?? false;
    $icon = $block['icon'] ?? 'star';
    $margin = $block['margin'] ?? 'default';
    
    $marginClasses = [
        'small' => 'my-6 lg:my-8',
        'default' => 'my-10 lg:my-12',
        'large' => 'my-16 lg:my-20',
    ];
    
    $widthClasses = [
        'full' => 'w-full',
        'wide' => 'w-3/4 mx-auto',
        'narrow' => 'w-1/2 mx-auto',
    ];
    
    $thicknessClasses = [
        'thin' => 'h-px',
        'default' => 'h-0.5',
        'thick' => 'h-1',
    ];
@endphp

<div class="{{ $marginClasses[$margin] ?? 'my-12' }}">
    @if($withIcon)
        {{-- Divider with Icon --}}
        <div class="flex items-center justify-center">
            <div class="flex-1 {{ $widthClasses[$width] ?? 'w-full' }}">
                @if($style === 'gradient')
                    <div class="h-0.5 bg-gradient-to-r from-transparent to-gray-300"></div>
                @else
                    <hr class="border-0 bg-gray-200 {{ $thicknessClasses[$thickness] ?? 'h-0.5' }}">
                @endif
            </div>
            
            <div class="px-4">
                <div class="w-10 h-10 rounded-full flex items-center justify-center"
                     style="background-color: {{ $color }}20; color: {{ $color }};">
                    <i class="fas fa-{{ $icon }}"></i>
                </div>
            </div>
            
            <div class="flex-1 {{ $widthClasses[$width] ?? 'w-full' }}">
                @if($style === 'gradient')
                    <div class="h-0.5 bg-gradient-to-l from-transparent to-gray-300"></div>
                @else
                    <hr class="border-0 bg-gray-200 {{ $thicknessClasses[$thickness] ?? 'h-0.5' }}">
                @endif
            </div>
        </div>
        
    @elseif($style === 'gradient')
        {{-- Gradient Divider --}}
        <div class="{{ $widthClasses[$width] ?? 'w-full' }}">
            <div class="h-0.5 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
        </div>
        
    @elseif($style === 'dashed')
        {{-- Dashed Divider --}}
        <div class="{{ $widthClasses[$width] ?? 'w-full' }}">
            <hr class="border-0 border-t-2 border-dashed border-gray-300">
        </div>
        
    @elseif($style === 'dotted')
        {{-- Dotted Divider --}}
        <div class="{{ $widthClasses[$width] ?? 'w-full' }}">
            <hr class="border-0 border-t-2 border-dotted border-gray-300">
        </div>
        
    @elseif($style === 'double')
        {{-- Double Line Divider --}}
        <div class="{{ $widthClasses[$width] ?? 'w-full' }} space-y-1">
            <hr class="border-0 bg-gray-200 {{ $thicknessClasses[$thickness] ?? 'h-0.5' }}">
            <hr class="border-0 bg-gray-200 {{ $thicknessClasses[$thickness] ?? 'h-0.5' }}">
        </div>
        
    @elseif($style === 'wavy')
        {{-- Wavy Divider --}}
        <div class="{{ $widthClasses[$width] ?? 'w-full' }}">
            <svg class="w-full h-4" viewBox="0 0 1200 50" preserveAspectRatio="none">
                <path d="M0,25 Q150,0 300,25 T600,25 T900,25 T1200,25" 
                      fill="none" stroke="{{ $color }}" stroke-width="2"></path>
            </svg>
        </div>
        
    @elseif($style === 'colored')
        {{-- Colored Divider --}}
        <div class="{{ $widthClasses[$width] ?? 'w-full' }} rounded-full overflow-hidden">
            <div class="{{ $thicknessClasses[$thickness] ?? 'h-0.5' }}" style="background-color: {{ $color }};"></div>
        </div>
        
    @elseif($style === 'colored-gradient')
        {{-- Colored Gradient Divider --}}
        <div class="{{ $widthClasses[$width] ?? 'w-full' }}">
            <div class="h-1 rounded-full" style="background: linear-gradient(90deg, transparent, {{ $color }}, transparent);"></div>
        </div>
        
    @else
        {{-- Default Divider --}}
        <hr class="border-0 bg-gray-200 {{ $widthClasses[$width] ?? 'w-full' }} {{ $thicknessClasses[$thickness] ?? 'h-0.5' }}">
    @endif
</div>
