@props(['title' => '', 'actions' => []])

<div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
    <div class="flex items-center justify-between px-4 py-3 border-b border-slate-200 dark:border-slate-700">
        <div class="flex items-center gap-2">
            <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>
            <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ $title }}</h3>
        </div>
        <div class="flex items-center gap-2">
            @foreach($actions as $action)
                <a href="{{ $action['url'] ?? '#' }}" class="px-3 py-1.5 {{ $action['primary'] ?? false ? 'bg-primary-600 hover:bg-primary-700 text-white' : 'bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300' }} text-xs font-semibold rounded-lg transition-colors flex items-center gap-1">
                    @if(isset($action['icon']))
                        <span>{{ $action['icon'] }}</span>
                    @endif
                    {{ $action['label'] ?? '' }}
                </a>
            @endforeach
        </div>
    </div>

    {{-- PDF Preview Area --}}
    <div class="bg-slate-100 dark:bg-slate-900 p-8 flex items-center justify-center min-h-[500px]">
        <div class="bg-white shadow-lg rounded-lg w-full max-w-[600px] p-8 text-center">
            {{ $slot }}
        </div>
    </div>
</div>