@props([
    'label' => '',
    'value' => '',
    'hint' => null,
    // Emphasis: a plain line, a running subtotal, the block's bottom line, a
    // deduction, or context the block does not add up (e.g. invoiced value
    // sitting inside a cash block).
    'subtotal' => false,
    'total' => false,
    'negative' => false,
    'muted' => false,
])

@php
    $rowClass = match (true) {
        $total => 'bg-slate-50/80',
        $subtotal => 'bg-slate-50/40',
        default => 'transition hover:bg-slate-50/70',
    };

    $labelClass = match (true) {
        $total => 'text-sm font-bold text-slate-900',
        $subtotal => 'text-sm font-semibold text-slate-900',
        $muted => 'text-sm text-slate-500',
        default => 'text-sm text-slate-600',
    };

    $valueClass = match (true) {
        $total => 'text-base font-bold text-slate-900',
        $subtotal => 'text-sm font-bold text-slate-900',
        $negative => 'text-sm font-semibold text-rose-600',
        $muted => 'text-sm font-semibold text-slate-500',
        default => 'text-sm font-semibold text-slate-900',
    };
@endphp

<tr {{ $attributes->merge(['class' => $rowClass]) }}>
    {{-- Text wraps, money never does (see the responsive-tables convention). --}}
    <td class="px-3 py-3.5 lg:px-4">
        <p class="{{ $labelClass }}">{{ $label }}</p>
        @if ($hint)
            <p class="mt-0.5 text-xs text-slate-400">{{ $hint }}</p>
        @endif
    </td>
    <td class="whitespace-nowrap px-3 py-3.5 text-right tabular-nums lg:px-4 {{ $valueClass }}">{{ $value }}</td>
</tr>