@props(['icon', 'title', 'statusColor' => '', 'statusLabel' => '', 'subtitle' => '', 'rightInfo' => []])

<div class="rounded-3 border p-3 mb-4 d-flex flex-wrap align-items-center gap-3">
    <div class="rounded-3 bg-light d-flex align-items-center justify-content-center flex-shrink-0"
         style="width:56px;height:56px">
        <i class="fa-solid {{ $icon }} fa-xl text-secondary"></i>
    </div>
    <div class="flex-grow-1 min-w-0">
        <div class="d-flex flex-wrap align-items-center gap-2">
            <span class="fw-bold fs-5">{{ $title }}</span>
            @if ($statusLabel)
                <span class="badge bg-{{ $statusColor }}">{{ $statusLabel }}</span>
            @endif
        </div>
        @if ($subtitle)
            <div class="text-muted small mt-1">{{ $subtitle }}</div>
        @endif
    </div>
    @if (!empty($rightInfo) && count($rightInfo) > 0)
        <div class="text-end text-muted small d-none d-md-block">
            @foreach ($rightInfo as $info)
                <div>
                    <i class="fa-solid {{ $info['icon'] }} fa-xs me-1"></i>{{ $info['label'] }}
                </div>
            @endforeach
        </div>
    @endif
</div>

{{ $slot }}