@props([
'modal' => null,
'title' => null,
'description' => null,
'buttonText' => null,
'button_href' => null,
])

<div class="flex flex-1 min-h-[320px] items-center justify-center py-10">
    <div class="w-full max-w-md rounded-2xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 px-8 py-12 text-center shadow-sm">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-primary-50 text-primary-600 dark:bg-primary-950/50 dark:text-primary-400 ring-1 ring-inset ring-primary-100 dark:ring-primary-900/60">
            @if($modal || $button_href)
            <x-heroicon-o-plus class="w-8 h-8" />
            @else
            <x-heroicon-o-exclamation-circle class="w-8 h-8" />
            @endif
        </div>
        <h2 class="mt-6 text-lg font-semibold text-surface-900 dark:text-white tracking-tight">{{ $title }}</h2>
        <p class="mt-2 text-sm text-surface-500 dark:text-surface-400 leading-relaxed">
            {{ $description }}
        </p>
        @if($button_href)
        <div>
            <a href="{{ $button_href }}" class="mt-3 inline-flex" data-no-ajax>
                <x-buttons.primary>
                    <x-heroicon-o-plus class="w-4 h-4" />
                    {{ $buttonText }}
                </x-buttons.primary>
            </a>
        </div>
        @endif
        @if($modal)
        <div class="mt-3 inline-flex">
            <x-buttons.primary
                type="button"
                @click="{{ $modal }}">
                <x-heroicon-o-plus class="w-4 h-4" />
                {{ $buttonText }}
            </x-buttons.primary>
        </div>
        @endif
    </div>
</div>