@props(['label', 'icon' => null, 'value' => null, 'tone' => null])

{{-- A labelled fact in the summary column. Rendered as a definition pair so a
     screen reader announces it as one, not as two unrelated strings. --}}
<div {{ $attributes->merge(['class' => 'flex items-center justify-between gap-3 py-2.5']) }}>
    <dt class="flex min-w-0 items-center gap-2.5 text-sm text-slate-500 dark:text-slate-400">
        @if ($icon)
            <span class="grid size-7 shrink-0 place-items-center rounded-lg bg-slate-100 text-slate-500
                         dark:bg-slate-800 dark:text-slate-400" aria-hidden="true">
                <x-icon :name="$icon" class="size-3.5" />
            </span>
        @endif
        <span class="truncate">{{ $label }}</span>
    </dt>

    <dd @class([
        'shrink-0 text-sm font-semibold tabular-nums',
        'text-emerald-600 dark:text-emerald-400' => $tone === 'ok',
        'text-amber-600 dark:text-amber-400'     => $tone === 'warn',
        'text-red-600 dark:text-red-400'         => $tone === 'bad',
        'text-slate-900 dark:text-white'         => $tone === null,
    ])>
        {{ $value ?? $slot }}
    </dd>
</div>