@props([
    'icon' => 'info',
    'title' => '',
    'description' => '',
    'color' => 'primary',
])

@php
    $colorMap = [
        'primary' => 'bg-primary-dim text-primary',
        'success' => 'bg-success-dim text-success',
        'warning' => 'bg-warning-dim text-warning',
        'info' => 'bg-info-dim text-info',
        'danger' => 'bg-danger-dim text-danger',
    ];

    $iconClasses = $colorMap[$color] ?? $colorMap['primary'];
@endphp

<x-ui.card class="sms-highlight border-0 shadow-sm rounded-4 p-4">
    <div class="d-flex">
        <div class="icon-circle icon-circle-md {{ $iconClasses }}">
            <em class="icon ni ni-{{ $icon }}"></em>
        </div>
        <div class="flex-grow-1 ms-2">
            @if($title)
                <h6 class="mb-1">{{ $title }}</h6>
            @endif
            @if($description)
                <p class="text-soft small mb-0">{{ $description }}</p>
            @endif
        </div>
    </div>
</x-ui.card>