@props([
    'title',
    'count' => 0,
    'severity' => 'info',
    'actionLabel',
    'actionUrl' => '#',
    'icon' => 'fe fe-activity',
])

@php
    $accent = config('theme.colors.accent');
    $primary = config('theme.colors.primary');
    $danger = config('theme.colors.accent_dark');
    $border = match ($severity) {
        'critical', 'danger' => $danger,
        'warning' => $accent,
        default => $primary,
    };
@endphp

<div class="col-sm-6 col-xl-4">
    <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
            <div class="d-flex align-items-start gap-3 mb-3">
                <span
                    class="avatar avatar-md rounded d-inline-flex align-items-center justify-content-center flex-shrink-0"
                    style="background: {{ config('theme.gradients.primary') }};">
                    <i class="{{ $icon }} text-white fs-20"></i>
                </span>
                <div class="min-w-0 flex-grow-1">
                    <div class="text-muted small text-truncate">{{ $title }}</div>
                    <div class="fs-3 fw-bold" style="color: {{ config('theme.colors.text') }};">{{ $count }}</div>
                </div>
            </div>
            <div class="rounded px-2 py-1 small mb-3 bg-light" style="border-left: 4px solid {{ $border }};">
                {{ __('dashboard.action_center.severity.'.$severity) }}
            </div>
            <a href="{{ $actionUrl }}" class="btn btn-sm w-100 text-white"
                style="background: {{ config('theme.gradients.primary') }};">
                {{ $actionLabel }}
            </a>
        </div>
    </div>
</div>
