Card Ledger code

@props([
    'title',
    'reference' => null,
    'rows' => [],
    'totalLabel' => null,
    'totalValue' => null,
    'stamp' => null,
    'stampVariant' => 'green',
    'footnote' => null,
])

@php
    /*
    | Receipt-style ledger: monospace figures, dotted leader lines between
    | label and value, a double-rule total and an optional rubber stamp.
    | For invoices, usage summaries and billing breakdowns.
    |
    | rows: array of ['label' => 'Subtotal', 'value' => '$249.00']
    |
    | Usage:
    |   <x-ui.card-ledger
    |       title="Invoice #1042"
    |       reference="Mar 2026"
    |       :rows="[['label' => 'Subtotal', 'value' => '$249.00']]"
    |       total-label="Amount due"
    |       total-value="$236.55"
    |       stamp="Paid"
    |   />
    */
    $stampColors = [
        'green' => 'border-green-600/50 text-green-700 dark:border-green-500/50 dark:text-green-400',
        'red' => 'border-red-600/50 text-red-700 dark:border-red-500/50 dark:text-red-400',
        'amber' => 'border-amber-600/50 text-amber-700 dark:border-amber-500/50 dark:text-amber-400',
        'brand' => 'border-brand-600/50 text-brand-700 dark:border-brand-500/50 dark:text-brand-400',
        'gray' => 'border-gray-400/60 text-gray-500 dark:border-gray-600 dark:text-gray-400',
    ];
@endphp

<div {{ $attributes->merge(['class' => 'relative min-w-0 rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900']) }}>
    @if ($stamp)
        <span @class([
            'pointer-events-none absolute right-4 top-4 -rotate-6 rounded border-2 px-2 py-0.5 text-[11px] font-bold uppercase tracking-[0.22em] opacity-80',
            $stampColors[$stampVariant] ?? $stampColors['green'],
        ])>{{ $stamp }}</span>
    @endif

    <p class="text-sm font-semibold tracking-tight text-gray-900 dark:text-white">{{ $title }}</p>
    @if ($reference)
        <p class="mt-0.5 font-mono text-[11px] uppercase tracking-wider text-gray-400 dark:text-gray-500">{{ $reference }}</p>
    @endif

    @if (count($rows) > 0)
        <dl class="mt-5 space-y-2.5">
            @foreach ($rows as $row)
                <div class="flex items-baseline gap-2 text-sm">
                    <dt class="shrink-0 text-gray-600 dark:text-gray-400">{{ $row['label'] }}</dt>
                    <span class="min-w-4 flex-1 border-b border-dotted border-gray-300 dark:border-gray-700" aria-hidden="true"></span>
                    <dd class="shrink-0 font-mono tabular-nums text-gray-900 dark:text-gray-100">{{ $row['value'] }}</dd>
                </div>
            @endforeach
        </dl>
    @endif

    @if ($totalLabel !== null)
        <div class="mt-4 flex items-baseline justify-between gap-2 border-t-[3px] border-double border-gray-300 pt-3 dark:border-gray-700">
            <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $totalLabel }}</p>
            <p class="font-mono text-base font-bold tabular-nums text-gray-900 dark:text-white">{{ $totalValue }}</p>
        </div>
    @endif

    @if ($footnote)
        <p class="mt-4 text-[11px] leading-relaxed text-gray-400 dark:text-gray-500">{{ $footnote }}</p>
    @endif
</div>