@props([
    'label' => '',
    'value' => 0,
    'hint'  => '',
    'tone'  => 'emerald',
])

@php
$tones = [
    'emerald' => [
        'ring'  => 'from-emerald-400 to-emerald-600',
        'dot'   => 'bg-emerald-400',
        'value' => 'text-emerald-300',
    ],
    'cyan' => [
        'ring'  => 'from-cyan-400 to-cyan-600',
        'dot'   => 'bg-cyan-400',
        'value' => 'text-cyan-300',
    ],
    'amber' => [
        'ring'  => 'from-amber-400 to-amber-600',
        'dot'   => 'bg-amber-400',
        'value' => 'text-amber-300',
    ],
    'rose' => [
        'ring'  => 'from-rose-400 to-rose-600',
        'dot'   => 'bg-rose-400',
        'value' => 'text-rose-300',
    ],
];

$style = $tones[$tone] ?? $tones['emerald'];
@endphp

<div class="rounded-2xl bg-slate-950/70 border border-slate-800/80
            px-4 py-3 sm:px-5 sm:py-4
            flex items-center justify-between gap-3
            shadow-[0_18px_45px_rgba(0,0,0,0.6)]
            backdrop-blur-xl">

    {{-- النص — العنوان والوصف --}}
    <div class="min-w-0">
        <p class="text-[11px] sm:text-xs font-semibold text-slate-200">
            {{ $label }}
        </p>
        @if($hint)
            <p class="text-[10px] sm:text-[11px] text-slate-500 mt-0.5 truncate">
                {{ $hint }}
            </p>
        @endif
    </div>

    {{-- الأيقونة + الرقم --}}
    <div class="flex items-center gap-3 flex-shrink-0">

        {{-- دائرة أيقونة ملونة --}}
        <div class="relative">
            <div class="w-9 h-9 rounded-full bg-gradient-to-br {{ $style['ring'] }}
                        flex items-center justify-center shadow-[0_0_18px_rgba(0,0,0,0.7)]">
                <span class="w-2 h-2 rounded-full {{ $style['dot'] }} shadow-[0_0_8px_rgba(255,255,255,0.7)]"></span>
            </div>
        </div>

        {{-- الرقم --}}
        <div class="text-right">
            <div class="text-2xl sm:text-3xl font-black leading-none {{ $style['value'] }}">
                {{ $value }}
            </div>
            <div class="text-[10px] text-slate-500 mt-0.5">
                حالة حالياً
            </div>
        </div>

    </div>
</div>