@props([
    'items' => [],
    'emptyMessage' => null,
])

@if ($items !== [])
    <div class="dberp-entitlement-summary grid gap-3 sm:grid-cols-2">
        @foreach ($items as $item)
            @php
                $enabled = (bool) ($item['enabled'] ?? false);
                $cardBorderClass = $enabled
                    ? 'border-success-200 bg-success-50/50 dark:border-success-500/30 dark:bg-success-500/5'
                    : 'border-gray-200 bg-gray-50/80 dark:border-white/10 dark:bg-white/5';
                $iconWrapClass = $enabled
                    ? 'bg-success-100 text-success-700 dark:bg-success-500/20 dark:text-success-300'
                    : 'bg-gray-100 text-gray-500 dark:bg-white/10 dark:text-gray-400';
            @endphp

            <div @class([
                'flex items-start gap-3 rounded-xl border p-4 shadow-sm transition',
                $cardBorderClass,
            ])>
                <div @class([
                    'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg',
                    $iconWrapClass,
                ])>
                    <x-filament::icon
                        :icon="$item['icon'] ?? 'heroicon-o-check-badge'"
                        class="h-5 w-5"
                    />
                </div>

                <div class="min-w-0 flex-1 space-y-2">
                    <div class="text-sm font-medium leading-snug text-gray-950 dark:text-white">
                        {{ $item['label'] }}
                    </div>

                    <x-filament::badge
                        :color="$enabled ? 'success' : 'gray'"
                        size="sm"
                    >
                        {{ $item['status_label'] }}
                    </x-filament::badge>
                </div>
            </div>
        @endforeach
    </div>
@elseif (filled($emptyMessage))
    <div class="dberp-entitlement-summary-empty flex items-start gap-3 rounded-xl border border-dashed border-gray-300 bg-gray-50/80 p-4 dark:border-white/15 dark:bg-white/5">
        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500 dark:bg-white/10 dark:text-gray-400">
            <x-filament::icon
                icon="heroicon-o-inbox"
                class="h-5 w-5"
            />
        </div>

        <p class="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            {{ $emptyMessage }}
        </p>
    </div>
@endif
