@props([
    'pendingProofs',
    'pendingCount' => 0,
])

@php
    $pendingProofs = $pendingProofs ?? collect();
    $pendingCount = (int) $pendingCount;
@endphp

<x-dashboard.widget-card
    title="Proof Submissions Pending Review"
    :subtitle="$pendingCount === 1 ? '1 submission awaiting your review' : $pendingCount.' submissions awaiting your review'"
>
    @if ($pendingProofs->isEmpty())
        <p class="text-sm text-gray-500 py-2">
            No proof submissions are waiting for review.
        </p>
    @else
        <ul class="divide-y divide-gray-100 rounded-lg border border-gray-100 overflow-hidden">
            @foreach ($pendingProofs as $proof)
                <li class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-3 py-2.5 bg-white hover:bg-gray-50/80">
                    <div class="min-w-0">
                        <p class="text-sm font-medium text-gray-900 truncate" title="{{ $proof->title }}">
                            {{ $proof->title }}
                        </p>
                        <p class="mt-0.5 text-xs text-gray-600">
                            <span class="font-medium text-gray-700">{{ $proof->proofTypeLabel() }}</span>
                            <span class="text-gray-400">&middot;</span>
                            {{ $proof->submittedByName() }}
                            @if ($proof->proof_date)
                                <span class="text-gray-400">&middot;</span>
                                {{ $proof->proof_date->format('d M Y') }}
                            @endif
                        </p>
                    </div>
                    <span class="shrink-0 inline-flex self-start rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-800">
                        Pending
                    </span>
                </li>
            @endforeach
        </ul>
        @if ($pendingCount > $pendingProofs->count())
            <p class="mt-2 text-xs text-gray-500">
                Showing {{ $pendingProofs->count() }} of {{ number_format($pendingCount) }} pending.
            </p>
        @endif
    @endif

    <x-slot:actions>
        <a
            href="{{ route('proofs.review') }}"
            class="inline-flex items-center text-xs font-medium text-red-600 hover:text-red-700"
        >
            Review proofs
        </a>
    </x-slot:actions>
</x-dashboard.widget-card>