{{--
    Button Component - AdminLTE Theme
    Based on AdminLTE v4 Button styling patterns
    
    Usage:
    <x-proxmox::ui.button>Click me</x-proxmox::ui.button>
    <x-proxmox::ui.button variant="primary" icon="ri-add-line">Add Server</x-proxmox::ui.button>
    <x-proxmox::ui.button variant="danger" size="sm">Delete</x-proxmox::ui.button>
    <x-proxmox::ui.button :loading="true">Processing</x-proxmox::ui.button>
--}}

@props([
    'variant' => 'secondary',
    'size' => 'md',
    'icon' => null,
    'iconRight' => null,
    'loading' => false,
    'loadingText' => null,
    'disabled' => false,
    'href' => null,
    'type' => 'button',
    'full' => false,
    'outline' => false,
])

@php
    $tag = $href ? 'a' : 'button';
    
    // AdminLTE button classes
    $variantClasses = [
        'primary' => $outline ? 'lte-btn-outline-primary' : 'lte-btn-primary',
        'secondary' => $outline ? 'lte-btn-outline-secondary' : 'lte-btn-secondary',
        'danger' => $outline ? 'lte-btn-outline-danger' : 'lte-btn-danger',
        'success' => $outline ? 'lte-btn-outline-success' : 'lte-btn-success',
        'warning' => 'lte-btn-warning',
        'info' => 'lte-btn-info',
        'ghost' => 'lte-btn-outline-secondary border-0',
        'link' => 'lte-text-primary',
    ];
    
    $sizeClasses = [
        'xs' => 'lte-btn-sm',
        'sm' => 'lte-btn-sm',
        'md' => '',
        'lg' => 'lte-btn-lg',
        'xl' => 'lte-btn-lg',
        'icon' => 'lte-btn-sm',
    ];
    
    $iconSizes = [
        'xs' => 'size-3.5',
        'sm' => 'size-4',
        'md' => 'size-4',
        'lg' => 'size-5',
        'xl' => 'size-5',
        'icon' => 'size-5',
    ];
    
    $iconSize = $iconSizes[$size] ?? $iconSizes['md'];
@endphp

<{{ $tag }}
    @if($href) href="{{ $href }}" @endif
    @if($tag === 'button') type="{{ $type }}" @endif
    @if($disabled || $loading) disabled @endif
    {{ $attributes->class([
        'lte-btn',
        $variantClasses[$variant] ?? $variantClasses['secondary'],
        $sizeClasses[$size] ?? '',
        $full ? 'w-full' : '',
    ]) }}
>
    @if($loading)
        <span class="lte-spinner lte-spinner-sm me-2" role="status" aria-hidden="true"></span>
        <span>{{ $loadingText ?? $slot }}</span>
    @else
        @if($icon)
            <x-dynamic-component :component="$icon" class="fill-current {{ $iconSize }}" />
        @endif
        {{ $slot }}
        @if($iconRight)
            <x-dynamic-component :component="$iconRight" class="fill-current {{ $iconSize }}" />
        @endif
    @endif
</{{ $tag }}>