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

@php
    /*
     * The accent rail is the BankIslami blue on every tile, so a row of stats
     * reads as one set rather than a row of unrelated colours. `tone` still
     * colours the icon chip and the figure, which is where the meaning belongs.
     * Legacy tone names are kept so existing callers keep working.
     */
    $tones = [
        'brand'   => ['chip' => 'bg-brand-50 text-brand-600',   'value' => 'text-slate-900'],
        'slate'   => ['chip' => 'bg-slate-100 text-slate-500',  'value' => 'text-slate-900'],
        'aqua'    => ['chip' => 'bg-aqua-50 text-aqua-600',     'value' => 'text-slate-900'],
        'sky'     => ['chip' => 'bg-aqua-50 text-aqua-600',     'value' => 'text-slate-900'],
        'indigo'  => ['chip' => 'bg-brand-50 text-brand-600',   'value' => 'text-slate-900'],
        'leaf'    => ['chip' => 'bg-leaf-50 text-leaf-700',     'value' => 'text-leaf-700'],
        'emerald' => ['chip' => 'bg-leaf-50 text-leaf-700',     'value' => 'text-leaf-700'],
        'amber'   => ['chip' => 'bg-amber-50 text-amber-600',   'value' => 'text-amber-700'],
        'rose'    => ['chip' => 'bg-rose-50 text-rose-600',     'value' => 'text-rose-700'],
    ];

    $t = $tones[$tone] ?? $tones['brand'];
    $tag = $href ? 'a' : 'div';
@endphp

<{{ $tag }} @if ($href) href="{{ $href }}" @endif
    @class([
        'group relative overflow-hidden rounded-xl border border-slate-200/80 bg-white p-5 pl-6 shadow-sm shadow-slate-200/50',
        'transition hover:-translate-y-0.5 hover:border-brand-200 hover:shadow-md' => $href,
    ])>

    {{-- Accent rail: the same brand blue on every tile --}}
    <span class="absolute inset-y-0 left-0 w-1 bg-brand-600"></span>

    <div class="flex items-start justify-between gap-3">
        <p class="text-[11px] font-bold tracking-wider text-slate-500 uppercase">{{ $label }}</p>
        @if ($icon)
            <span class="flex size-8 shrink-0 items-center justify-center rounded-lg {{ $t['chip'] }}">
                <x-icon :name="$icon" class="size-4" />
            </span>
        @endif
    </div>

    <p class="mt-2 text-2xl font-bold tabular-nums {{ $t['value'] }}">{{ $value }}</p>

    @if ($hint)
        <p class="mt-1 text-xs leading-snug text-slate-500">{{ $hint }}</p>
    @endif

    @if ($href)
        <span class="mt-3 inline-flex items-center gap-1 text-[11px] font-semibold text-brand-600 opacity-0 transition group-hover:opacity-100">
            View
            <x-icon name="arrow-right" class="size-3" />
        </span>
    @endif
</{{ $tag }}>