@props([
    'icon' => null,
    'title',
    'description' => null,
    'actionLabel' => null,
    'actionHref' => null,
    'actionIcon' => null,
])

<div {{ $attributes->merge(['class' => 'glass-card rounded-2xl px-6 py-16 text-center']) }}>
    {{-- Icon --}}
    @if($icon)
    <div class="w-16 h-16 mx-auto mb-5 bg-db-surface rounded-2xl flex items-center justify-center">
        {!! $icon !!}
    </div>
    @endif

    {{-- Title --}}
    <h3 class="text-lg font-semibold text-db-text-primary mb-2">{{ $title }}</h3>

    {{-- Description --}}
    @if($description)
    <p class="text-sm text-db-text-muted mb-6 max-w-sm mx-auto">{{ $description }}</p>
    @endif

    {{-- Action Button --}}
    @if($actionLabel && $actionHref)
    <a href="{{ $actionHref }}"
       class="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-gradient-to-r from-db-accent-primary to-emerald-600 hover:from-emerald-600 hover:to-db-accent-primary text-white text-sm font-medium rounded-xl shadow-lg shadow-db-accent-primary/25 transition-all">
        @if($actionIcon)
            {!! $actionIcon !!}
        @else
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
        @endif
        {{ $actionLabel }}
    </a>
    @endif

    {{-- Custom slot for additional content --}}
    @if($slot->isNotEmpty())
    <div class="mt-6">
        {{ $slot }}
    </div>
    @endif
</div>