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

<div class="cepi-stat-card">
    <div class="flex items-start justify-between gap-4">
        <div>
            <p class="text-sm font-medium text-slate-500">{{ $title }}</p>
            <p class="mt-3 text-3xl font-semibold tracking-tight text-slate-900">{{ $value }}</p>
        </div>
        <div class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-brand-50 text-brand-600">
            {{ $icon ?? '' }}
        </div>
    </div>

    @if ($meta)
        <p class="mt-4 text-sm text-slate-500">{{ $meta }}</p>
    @endif
</div>