@props(['label' => '', 'value' => '', 'icon' => null, 'color' => 'emerald', 'hint' => null])

@php
    $bubbles = [
        'emerald' => 'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400',
        'amber' => 'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400',
        'rose' => 'bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400',
        'sky' => 'bg-sky-50 text-sky-600 dark:bg-sky-500/10 dark:text-sky-400',
        'violet' => 'bg-violet-50 text-violet-600 dark:bg-violet-500/10 dark:text-violet-400',
    ];
    $bubble = $bubbles[$color] ?? $bubbles['emerald'];
@endphp

<div class="bg-white dark:bg-card rounded-xl border border-gray-200 dark:border-border p-5 flex items-start gap-4">
    @if ($icon)
        <div class="w-11 h-11 rounded-lg flex items-center justify-center shrink-0 {{ $bubble }}">
            <x-ui.icon :name="$icon" size="w-5 h-5" />
        </div>
    @endif
    <div class="min-w-0">
        <p class="text-sm text-muted-foreground">{{ $label }}</p>
        <p class="text-2xl font-semibold text-foreground mt-1 truncate">{{ $value }}</p>
        @if ($hint)<p class="text-xs text-muted-foreground mt-1">{{ $hint }}</p>@endif
    </div>
</div>