{{--
  BUTTONS GROUP
  Các variant: button (cơ bản), toolbar-button (trong toolbar)
  Usage: <x-ui.buttons type="button" ... /> hoặc <x-ui.buttons type="toolbar-button" ... />
--}}
@props([
    'type' => 'button', // 'button' | 'toolbar-button'
    'id' => null,
    'variant' => 'secondary', // primary, secondary, ghost, ghost-primary, add
    'size' => 'default', // default, compact, icon-only
    'icon' => null,
    'iconSvg' => null,
    'iconFa' => null, // Tên icon FontAwesome (vd: 'plus', 'trash', 'edit')
    'iconFaStyle' => 'fas', // Style FontAwesome: fas, far, fab
    'label' => '',
    'title' => '',
    'onclick' => null,
    'form' => null,
    'disabled' => false,
])

@php
if ($type === 'toolbar-button') {
    $baseClass = 'btn';
    $variantClass = match($variant) {
        'primary' => 'btn-primary',
        'secondary' => 'btn-secondary',
        'ghost' => 'btn-ghost',
        'ghost-primary' => 'btn-ghost-primary',
        default => 'btn-secondary',
    };
    $sizeClass = match($size) {
        'compact' => 'btn-compact',
        'icon-only' => 'btn-icon',
        default => '',
    };
    $classes = trim("{$baseClass} {$variantClass} {$sizeClass}");
} else {
    // Standard button
    $classes = match($variant) {
        'primary' => 'btn btn-primary',
        'add' => 'btn btn-add',
        'secondary' => 'btn btn-secondary',
        'ghost' => 'btn btn-ghost',
        'ghost-primary' => 'btn btn-ghost-primary',
        default => 'btn btn-secondary',
    };
}
@endphp

<button 
    type="button"
    @if($id) id="{{ $id }}" @endif
    class="{{ $classes }}"
    @if($title) title="{{ $title }}" @endif
    @if($onclick) onclick="{{ $onclick }}" @endif
    @if($form) form="{{ $form }}" @endif
    @if($disabled) disabled @endif
    {{ $attributes->except(['class']) }}
>
    @if($iconFa)
        {{-- blade-fontawesome syntax: @svg('fas-{icon}') --}}
        @switch($iconFaStyle)
            @case('far')
                @svg('far-'.$iconFa)
                @break
            @case('fab')
                @svg('fab-'.$iconFa)
                @break
            @default
                @svg('fas-'.$iconFa)
        @endswitch
    @elseif($iconSvg)
        <svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18">
            {!! $iconSvg !!}
        </svg>
    @elseif($icon)
        <span>{{ $icon }}</span>
    @endif
    @if($label && $size !== 'icon-only')
        <span>{{ $label }}</span>
    @endif
</button>
