<div
    @if ($pollingInterval)
        wire:poll.{{ $pollingInterval }}
    @endif
>
<x-filament::section heading="Needs Attention">

    @if (count($items) === 0)
        <div class="flex flex-col gap-3">
            <div class="text-sm text-gray-600 dark:text-gray-300">
                Everything looks healthy right now.
            </div>

            <div class="flex flex-col gap-3">
                @foreach ($healthyChecks as $check)
                    <div class="flex items-start gap-3">
                        <x-filament::icon
                            icon="heroicon-m-check-circle"
                            class="mt-0.5 h-5 w-5 text-success-600 dark:text-success-400"
                        />

                        <div class="flex-1">
                            <div class="text-sm font-medium text-gray-950 dark:text-white">{{ $check['title'] }}</div>
                            <div class="mt-0.5 text-sm text-gray-600 dark:text-gray-300">{{ $check['body'] }}</div>

                            <div class="mt-1">
                                <x-filament::link :href="$check['url']" size="sm">
                                    {{ $check['linkLabel'] }}
                                </x-filament::link>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @else
        <div class="flex flex-col gap-3">
            @foreach ($items as $item)
                <a
                    href="{{ $item['url'] }}"
                    class="rounded-lg bg-gray-50 p-4 text-left transition hover:bg-gray-100 dark:bg-white/5 dark:hover:bg-white/10"
                >
                    <div class="flex items-start justify-between gap-3">
                        <div class="text-sm font-semibold text-gray-950 dark:text-white">{{ $item['title'] }}</div>
                        <x-filament::badge :color="$item['badgeColor']" size="sm">
                            {{ $item['badge'] }}
                        </x-filament::badge>
                    </div>
                    <div class="mt-1 text-sm text-gray-600 dark:text-gray-300">{{ $item['body'] }}</div>
                </a>
            @endforeach
        </div>
    @endif
</x-filament::section>
</div>
