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

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

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