@props([
    'show' => false,
    'title' => '',
    'icon' => null,
    'size' => 'md',
])

{{--
    PDF Slide Panel Component
    
    A modern slide-in panel for PDF operations like extract and merge.
    Features smooth animations and a clean design.
    
    Usage:
    <x-pdf.slide-panel 
        show="showExtractPanel" 
        title="Extract Pages"
        icon="file-plus"
    >
        <x-slot name="body">...</x-slot>
        <x-slot name="footer">...</x-slot>
    </x-pdf.slide-panel>
--}}

@php
    $sizeClasses = match($size) {
        'sm' => 'pdf-slide-panel-sm',
        'lg' => 'pdf-slide-panel-lg',
        default => 'pdf-slide-panel-md',
    };
@endphp

<div 
    class="pdf-slide-panel-overlay"
    x-show="{{ $show }}"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    x-on:click.self="{{ $show }} = false"
    x-cloak
>
    <div 
        class="pdf-slide-panel {{ $sizeClasses }}"
        x-show="{{ $show }}"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 transform translate-x-full"
        x-transition:enter-end="opacity-100 transform translate-x-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 transform translate-x-0"
        x-transition:leave-end="opacity-0 transform translate-x-full"
        x-on:click.stop
    >
        {{-- Header --}}
        <div class="pdf-slide-panel-header">
            <div class="pdf-slide-panel-title">
                @if($icon)
                    <span class="pdf-slide-panel-icon">
                        <em class="icon ni ni-{{ $icon }}"></em>
                    </span>
                @endif
                <h5 class="mb-0">{{ $title }}</h5>
            </div>
            <button 
                type="button" 
                class="pdf-slide-panel-close"
                x-on:click="{{ $show }} = false"
            >
                <em class="icon ni ni-cross"></em>
            </button>
        </div>

        {{-- Body --}}
        <div class="pdf-slide-panel-body">
            {{ $body ?? $slot }}
        </div>

        {{-- Footer --}}
        @if(isset($footer))
            <div class="pdf-slide-panel-footer">
                {{ $footer }}
            </div>
        @endif
    </div>
</div>