<div {{ $attributes->merge(['class' => 'flex flex-col items-center justify-center p-12 text-center bg-[var(--bg-card)] rounded-[var(--radius-lg)] border border-[var(--border-color)]']) }}>
    <div class="mb-4 p-4 rounded-full bg-[var(--input-bg)] inline-flex items-center justify-center">
        @if(isset($icon))
            <i class="bi {{ $icon }} text-4xl text-[var(--text-secondary)]"></i>
        @else
            <i class="bi bi-inbox text-4xl text-[var(--text-secondary)]"></i>
        @endif
    </div>
    <h3 class="text-xl font-bold text-[var(--text-primary)] mb-2">{{ $title ?? 'No data found' }}</h3>
    <p class="text-[var(--text-secondary)] max-w-md mb-6">{{ $description ?? 'There are no records to display at this time.' }}</p>
    
    @if(isset($action))
        <div>
            {{ $action }}
        </div>
    @endif
</div>
