@props(['client', 'heading' => 'Client details'])

<section class="mt-6 rounded-2xl border border-slate-200 bg-slate-50 p-4 sm:p-5">
    <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-400">{{ $heading }}</p>
    <p class="mt-2 text-sm font-bold text-slate-950">{{ $client->name }}</p>

    @if (count($client->documentDetails()) > 0)
        <dl class="mt-3 grid gap-x-6 gap-y-2 text-sm sm:grid-cols-2">
            @foreach ($client->documentDetails() as $detail)
                <div class="flex min-w-0 gap-2">
                    <dt class="shrink-0 font-semibold text-slate-500">{{ $detail['label'] }}:</dt>
                    <dd class="min-w-0 break-words text-slate-800">{{ $detail['value'] }}</dd>
                </div>
            @endforeach
        </dl>
    @endif
</section>