@props(['title', 'subtitle' => null, 'icon' => null])

<div class="min-h-[70vh] flex items-center justify-center px-4 py-12">
    <div class="w-full max-w-md">
        <div class="text-center mb-6">
            @if ($icon)
                <span class="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-indigo-500/10 text-indigo-400 mb-3">
                    <x-ui-icon :name="$icon" class="h-6 w-6" />
                </span>
            @endif
            <h1 class="text-2xl font-bold text-white">{{ $title }}</h1>
            @if ($subtitle)
                <p class="mt-1 text-sm text-gray-400">{{ $subtitle }}</p>
            @endif
        </div>
        <div class="rounded-2xl border border-gray-800 bg-gray-900 p-8">
            {{ $slot }}
        </div>
    </div>
</div>