@props([
    'title',
    'value' => 0,
    'unit' => '',
    'precision' => 2,
    'tone' => 'primary', // primary|success|warning|neutral|generalA|generalB|generalC
])

@php
    $tones = [
        'primary' => [
            'bar' => 'from-blue-600 to-blue-500',
            'card' => 'bg-blue-50/80 border-blue-200/80',
            'value' => 'text-blue-700',
            'unit' => 'text-blue-600',
        ],
        'success' => [
            'bar' => 'from-emerald-600 to-emerald-500',
            'card' => 'bg-emerald-50/80 border-emerald-200/80',
            'value' => 'text-emerald-700',
            'unit' => 'text-emerald-600',
        ],
        'warning' => [
            'bar' => 'from-amber-600 to-amber-500',
            'card' => 'bg-amber-50/80 border-amber-200/80',
            'value' => 'text-amber-700',
            'unit' => 'text-amber-600',
        ],
        'neutral' => [
            'bar' => 'from-slate-600 to-slate-500',
            'card' => 'bg-slate-50/80 border-slate-200/80',
            'value' => 'text-slate-700',
            'unit' => 'text-slate-600',
        ],
        'generalA' => [
            'bar' => 'from-indigo-600 to-indigo-500',
            'card' => 'bg-indigo-50/80 border-indigo-200/80',
            'value' => 'text-indigo-700',
            'unit' => 'text-indigo-600',
        ],
        'generalB' => [
            'bar' => 'from-cyan-600 to-cyan-500',
            'card' => 'bg-cyan-50/80 border-cyan-200/80',
            'value' => 'text-cyan-700',
            'unit' => 'text-cyan-600',
        ],
        'generalC' => [
            'bar' => 'from-slate-600 to-slate-500',
            'card' => 'bg-slate-50/80 border-slate-200/80',
            'value' => 'text-slate-700',
            'unit' => 'text-slate-600',
        ],
    ];
    $theme = $tones[$tone] ?? $tones['primary'];
@endphp

<div class="flex overflow-hidden rounded-2xl border border-input bg-background shadow-sm mb-1">
    @if(!$slot->isEmpty())
        <div class="w-[60px] justify-center flex mr-2">
            {{$slot}}
        </div>

 @endif
    <div class="p-4">

        <div class=" tracking-tight text-foreground">{{ $title }}</div>

        <div class=" pt-3">
            <span class=" font-black tracking-wide text-foreground">
                {{ number_format((float) $value, (int) $precision) }}
            </span>
            @if($unit !== '')
                <span class="ms-1 text-sm font-bold text-foreground">{{ $unit }}</span>
            @endif
        </div>
    </div>
</div>