@props([
    'title',
    'items',
    'empty' => 'Rien à afficher.',
    'tone' => 'slate',
])

@php
    $dot = ['rose' => 'bg-rose-500', 'sky' => 'bg-sky-500', 'slate' => 'bg-slate-400'][$tone] ?? 'bg-slate-400';
@endphp

<div class="card overflow-hidden">
    <div class="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800">
        <h2 class="flex items-center gap-2 text-base font-semibold text-slate-900 dark:text-white">
            <span class="h-2 w-2 rounded-full {{ $dot }}"></span>{{ $title }}
        </h2>
    </div>

    @if ($items->isEmpty())
        <p class="px-5 py-8 text-center text-sm text-slate-400">{{ $empty }}</p>
    @else
        <ul class="divide-y divide-slate-100 dark:divide-slate-800">
            @foreach ($items as $doc)
                <li>
                    <a href="{{ route('documents.show', $doc) }}" class="flex items-center justify-between gap-3 px-5 py-3 transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
                        <div class="min-w-0">
                            <p class="truncate text-sm font-medium text-slate-800 dark:text-slate-200">{{ $doc->data?->vendor?->name ?? $doc->title ?? $doc->original_filename }}</p>
                            <p class="text-xs text-slate-500">
                                Échéance {{ $doc->data?->due_date?->isoFormat('D MMM YYYY') }}
                                @if ($doc->data?->due_date)
                                    · <span class="{{ $doc->data->due_date->isPast() ? 'text-rose-500' : 'text-slate-400' }}">{{ $doc->data->due_date->diffForHumans() }}</span>
                                @endif
                            </p>
                        </div>
                        @if ($doc->data?->amount_total)
                            <span class="shrink-0 text-sm font-semibold text-slate-900 dark:text-white">{{ number_format((float) $doc->data->amount_total, 2, ',', ' ') }} €</span>
                        @endif
                    </a>
                </li>
            @endforeach
        </ul>
    @endif
</div>