{{--
    Button Component - LucentUI Theme
    Migrated from AdminLTE to Tailwind
    
    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';
    
    // LucentUI button classes
    $variantClasses = [
        'primary' => $outline 
            ? 'border border-primary text-primary bg-transparent hover:bg-primary/10 focus:ring-2 focus:ring-primary/50' 
            : 'bg-primary text-white hover:bg-primary/80 focus:ring-2 focus:ring-primary/50',
        'secondary' => $outline 
            ? 'border border-neutral text-base/80 bg-transparent hover:bg-neutral/10 focus:ring-2 focus:ring-neutral/50' 
            : 'bg-background-secondary text-base/80 border border-neutral hover:bg-background-secondary/80 focus:ring-2 focus:ring-neutral/50',
        'danger' => $outline 
            ? 'border border-error text-error bg-transparent hover:bg-error/10 focus:ring-2 focus:ring-error/50' 
            : 'bg-error text-white hover:bg-error/80 focus:ring-2 focus:ring-error/50',
        'success' => $outline 
            ? 'border border-success text-success bg-transparent hover:bg-success/10 focus:ring-2 focus:ring-success/50' 
            : 'bg-success text-white hover:bg-success/80 focus:ring-2 focus:ring-success/50',
        'warning' => $outline 
            ? 'border border-warning text-warning bg-transparent hover:bg-warning/10 focus:ring-2 focus:ring-warning/50' 
            : 'bg-warning text-white hover:bg-warning/80 focus:ring-2 focus:ring-warning/50',
        'info' => $outline 
            ? 'border border-info text-info bg-transparent hover:bg-info/10 focus:ring-2 focus:ring-info/50' 
            : 'bg-info text-white hover:bg-info/80 focus:ring-2 focus:ring-info/50',
        'ghost' => 'text-base/80 bg-transparent hover:bg-neutral/10 focus:ring-2 focus:ring-neutral/50',
        'link' => 'text-primary bg-transparent hover:underline p-0',
    ];
    
    $sizeClasses = [
        'xs' => 'px-2 py-1 text-xs',
        'sm' => 'px-3 py-1.5 text-sm',
        'md' => 'px-4 py-2 text-sm',
        'lg' => 'px-5 py-2.5 text-base',
        'xl' => 'px-6 py-3 text-base',
        'icon' => 'p-2',
    ];
    
    $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([
        'inline-flex items-center justify-center gap-2 font-semibold rounded-lg transition-all duration-200 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 active:scale-95',
        $variantClasses[$variant] ?? $variantClasses['secondary'],
        $sizeClasses[$size] ?? $sizeClasses['md'],
        $full ? 'w-full' : '',
    ]) }}
>
    @if($loading)
        <x-ri-loader-5-fill class="{{ $iconSize }} animate-spin" />
        <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 }}>