@props([
    'title',
    'value',
    'trend' => null,
    'icon' => null,
    'subtext' => null,
    'iconBg' => 'bg-emerald-50',
    'iconColor' => 'text-emerald-500'
])

<div class="bg-white rounded-xl border border-slate-100 p-6 shadow-sm flex flex-col justify-between">
    <div class="flex justify-between items-start">
        <span class="text-sm font-medium text-slate-500">{{ $title }}</span>
        @if($trend)
            <span class="inline-flex items-center gap-1 text-xs font-semibold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-md">
                <i data-lucide="trending-up" class="w-3 h-3"></i>
                {{ $trend }}
            </span>
        @elseif($icon)
            <span class="p-1.5 {{ $iconBg }} {{ $iconColor }} rounded-lg">
                <i data-lucide="{{ $icon }}" class="w-5 h-5"></i>
            </span>
        @endif
    </div>
    <div class="mt-4">
        <h3 class="text-3xl font-bold text-slate-900">{{ $value }}</h3>
        @if($subtext)
            <p class="text-xs text-slate-500 mt-1">{!! $subtext !!}</p>
        @endif
    </div>
</div>