@props([
    'title',
    'description' => null,
    'actionLabel' => null,
    'actionUrl' => null,
])

<x-app-layout>
    @php
        $viewErrors = $errors ?? new \Illuminate\Support\ViewErrorBag();
    @endphp

    <x-slot name="header">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <h2 class="text-xl font-semibold leading-tight text-slate-900">{{ $title }}</h2>
                @if ($description)
                    <p class="mt-1 text-sm text-slate-500">{{ $description }}</p>
                @endif
            </div>

            @if ($actionLabel && $actionUrl)
                <a href="{{ $actionUrl }}" class="inline-flex items-center justify-center rounded-2xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-indigo-200 transition hover:bg-indigo-700">
                    {{ $actionLabel }}
                </a>
            @endif
        </div>
    </x-slot>

    <div class="space-y-6">
        @if (session('success'))
            <div class="rounded-2xl border border-emerald-200 bg-emerald-50 px-5 py-4 text-sm font-medium text-emerald-700 shadow-sm">
                {{ session('success') }}
            </div>
        @endif

        @if ($viewErrors->any())
            <div class="rounded-2xl border border-rose-200 bg-rose-50 px-5 py-4 shadow-sm">
                <div class="text-sm font-semibold text-rose-700">Ada data yang perlu diperbaiki:</div>
                <ul class="mt-2 list-disc space-y-1 pl-5 text-sm text-rose-600">
                    @foreach ($viewErrors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{ $slot }}
    </div>
</x-app-layout>