{{--
  TOOLBARS GROUP
  Các variant: toolbar (chính), toolbar-group (nhóm buttons)
  Usage: <x-ui.toolbars type="toolbar" ... /> hoặc <x-ui.toolbars type="group" ... />
--}}
@props([
    'type' => 'toolbar', // 'toolbar' | 'group'
    
    // toolbar
    'searchId' => 'search-input',
    'searchPlaceholder' => 'Tìm kiếm...',
    'filterToggleId' => null,
    'addButtonLabel' => null,
    'addButtonOnclick' => null,
    'addModalId' => null,
])

@switch($type)

    @case('toolbar')
        <div class="section-header-actions">
            @if($addButtonLabel)
                <button class="btn btn-add" type="button" 
                    @if($addModalId) onclick="openModal('{{ $addModalId }}')" @endif
                    @if($addButtonOnclick) onclick="{{ $addButtonOnclick }}" @endif
                >
                    <span class="mr-1">➕</span> {{ $addButtonLabel }}
                </button>
            @endif

            <div class="header-toolbar-actions">
                <!-- Search + Filter Icon -->
                <div class="header-search-wrap">
                    <div class="filter-search-inline">
                        <div class="search-input-icon">
                            @svg('fas-search', 'search-icon')
                        </div>
                        <input
                            type="text"
                            id="{{ $searchId }}"
                            placeholder="{{ $searchPlaceholder }}"
                            class="search-input"
                        />
                    </div>
                    @if($filterToggleId)
                        <label for="{{ $filterToggleId }}" class="btn btn-ghost-primary filter-icon-btn" title="Bộ lọc nâng cao">
                            @svg('fas-filter', 'filter-icon-default')
                            @svg('fas-filter', 'filter-icon-active')
                        </label>
                    @endif
                </div>

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

    @case('group')
        <div class="btn-group">
            {{ $slot }}
        </div>
        @break

@endswitch
