@props([
    'title',
    'value',
    'tone' => 'positive',
    'subtitle' => null,
    'accent' => null,
])
@php
    $accentColors = [
        'positive' => 'bg-emerald-500',
        'warning' => 'bg-amber-500',
        'critical' => 'bg-rose-500',
        'info' => 'bg-sky-500',
        'primary' => 'bg-teal-600',
        'violet' => 'bg-violet-500',
        'sky' => 'bg-sky-500',
        'emerald' => 'bg-emerald-500',
        'amber' => 'bg-amber-500',
        'slate' => 'bg-slate-400',
        'rose' => 'bg-rose-500',
        'indigo' => 'bg-indigo-500',
        'orange' => 'bg-orange-500',
        'teal' => 'bg-teal-600',
    ];

    $leftAccent = $accentColors[$accent ?? $tone] ?? $accentColors['positive'];

    $valueClass = match ($tone) {
        'critical' => 'text-rose-700',
        'warning' => 'text-amber-700',
        'info' => 'text-sky-700',
        default => 'text-slate-900',
    };
@endphp
<div {{ $attributes->merge(['class' => 'relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 pl-5 shadow-sm']) }}>
    <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl {{ $leftAccent }}" aria-hidden="true"></span>
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ $title }}</p>
    <p class="mt-2 text-xl font-bold tabular-nums {{ $valueClass }}">{{ $value }}</p>
    @if($subtitle)
        <p class="mt-1 text-xs text-slate-600">{{ $subtitle }}</p>
    @endif
</div>