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

<div {{ $attributes->merge(['class' => 'bg-[#121826] border border-[#1b2233] rounded-[12px] mb-4 overflow-hidden']) }}>
    @if($title || $icon || isset($header) || isset($headerExtra))
        <div class="flex items-center justify-between px-5 py-3 border-b border-[#1b2233] gap-4 flex-wrap">
            <div class="flex items-center gap-2.5 font-semibold text-[14.5px] tracking-tight text-white min-w-0">
                @if(isset($header))
                    {{ $header }}
                @else
                    @if($icon)
                        <i class="{{ $icon }} text-[#4b82f7] text-[13.5px]"></i>
                    @endif
                    @if($title)
                        <span>{{ $title }}</span>
                    @endif
                @endif
            </div>
            @if(isset($headerExtra))
                <div class="flex items-center gap-2 shrink-0">
                    {{ $headerExtra }}
                </div>
            @endif
        </div>
    @endif

    <div>
        {{ $slot }}
    </div>
</div>