{{--
    Sidebar Header Component
    
    @param string $title - عنوان سایدبار
    @param string $logo - آیکون یا لوگو
    @param bool $showToggle - نمایش دکمه جمع/باز کردن
--}}

@props([
    'title' => 'مدیریت سیستم',
    'logo' => '🏢',
    'showToggle' => true
])

<div class="flex items-center justify-between px-5 pt-5 pb-4">
    <div class="flex items-center gap-3">
        <div class="size-9 rounded-xl bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center">
            <span class="text-lg">{{ $logo }}</span>
        </div>
        <div class="text-lg font-bold tracking-tight">{{ $title }}</div>
    </div>
    
    @if($showToggle)
        <button type="button" class="text-slate-300 hover:text-white transition-colors" 
                title="جمع/باز کردن منو" 
                data-toggle="sidebar">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
        </button>
    @endif
</div>