@props([
    'title' => null,
    'value' => null,
    'accent' => 'primary',
])

@php
    $accentStyles = [
        'primary' => ['badge' => 'bg-primary-soft c-primary', 'ring' => 'ring-primary-soft'],
        'secondary' => ['badge' => 'bg-secondary-soft c-secondary', 'ring' => 'ring-secondary-soft'],
        'success' => ['badge' => 'bg-success-soft c-success', 'ring' => 'ring-success-soft'],
        'warning' => ['badge' => 'bg-warning-soft c-warning', 'ring' => 'ring-warning-soft'],
    ][$accent] ?? ['badge' => 'bg-primary-soft c-primary', 'ring' => 'ring-primary-soft'];
@endphp

<div class="rounded-[1.25rem] border border-muted bg-surface px-4 py-4 shadow-sm ring-1 {{ $accentStyles['ring'] }}">
    <div class="text-xs font-semibold uppercase tracking-[0.16em] c-subtle">{{ $title }}</div>
    <div class="mt-3 inline-flex min-h-10 items-center rounded-full px-3 py-2 text-sm font-extrabold tracking-[-0.03em] {{ $accentStyles['badge'] }}">
        {{ $value }}
    </div>
</div>