@props([
    'icon' => null,
    'title' => null,
    'subtitle' => null,
    'actions' => null,
])

<div class="flex items-center justify-between">

    {{-- LEFT --}}
    <div class="flex items-center gap-3">
        <div class="size-10 rounded-xl bg-primary/10 flex items-center justify-center">
            {!! $icon !!}
        </div>

        <div>
            <h2 class="text-xl font-semibold text-text">
                {{ $title }}
            </h2>

            @if($subtitle)
                <p class="text-xs text-text-muted">
                    {{ $subtitle }}
                </p>
            @endif
        </div>
    </div>

    {{-- RIGHT --}}
    @if($actions)
        <div>
            {{ $actions }}
        </div>
    @endif

</div>
