@props([
    'items' => [],
    'suggestionLabel' => '',
])

<ul class="divide-y divide-gray-200 rounded-lg border border-gray-200 dark:divide-gray-700 dark:border-gray-700">
    @foreach ($items as $item)
        <li class="px-4 py-3">
            <div class="flex flex-wrap items-start justify-between gap-2">
                <p class="text-sm font-medium text-gray-900 dark:text-white">
                    {{ $item['label'] }}
                </p>
                <span
                    @class([
                        'inline-flex shrink-0 rounded-md px-2 py-0.5 text-xs font-medium',
                        'bg-success-100 text-success-700 dark:bg-success-500/20 dark:text-success-300' => $item['status'] === 'pass',
                        'bg-warning-100 text-warning-800 dark:bg-warning-500/20 dark:text-warning-200' => $item['status'] === 'warn',
                        'bg-danger-100 text-danger-700 dark:bg-danger-500/20 dark:text-danger-300' => $item['status'] === 'fail',
                    ])
                >
                    {{ $item['status_label'] }}
                </span>
            </div>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
                {{ $item['message'] }}
            </p>
            @if (filled($item['suggestion'] ?? null))
                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                    <span class="font-medium text-gray-700 dark:text-gray-300">{{ $suggestionLabel }}：</span>
                    {{ $item['suggestion'] }}
                </p>
            @endif
        </li>
    @endforeach
</ul>
