@props([
    'type' => 'button',
    'variant' => 'primary', // primary, secondary, accent, success, warning, danger, ghost, outline, white, outline-white
    'size' => 'md', // xs, sm, md, lg, xl
    'loading' => false,
    'pulse' => false,
    'glow' => false,
    'ripple' => false,
    'disabled' => false,
    'class' => '',
    'icon' => null,
    'icon-position' => 'left' // left, right
])

@php
    $buttonClasses = 'btn-' . $variant . ' btn-' . $size;
    
    if ($loading) {
        $buttonClasses .= ' btn-loading';
    }
    
    if ($pulse) {
        $buttonClasses .= ' btn-pulse';
    }
    
    if ($glow) {
        $buttonClasses .= ' btn-glow';
    }
    
    if ($ripple) {
        $buttonClasses .= ' btn-ripple';
    }
    
    if ($disabled) {
        $buttonClasses .= ' disabled';
    }
    
    $buttonClasses .= ' ' . $class;
@endphp

<button 
    type="{{ $type }}" 
    {{ $attributes->merge(['class' => $buttonClasses]) }}
    {{ $disabled ? 'disabled' : '' }}
>
    @if($loading)
        <span class="sr-only">جاري التحميل...</span>
    @endif
    
    @if($icon && $icon-position === 'left')
        <span class="button-icon button-icon-left">
            {!! $icon !!}
        </span>
    @endif
    
    <span class="button-content">
        {{ $slot }}
    </span>
    
    @if($icon && $icon-position === 'right')
        <span class="button-icon button-icon-right">
            {!! $icon !!}
        </span>
    @endif
</button>

<style>
.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    margin: 0 0.25rem;
}

.button-icon-left {
    margin-left: 0;
    margin-right: 0.5rem;
}

.button-icon-right {
    margin-left: 0.5rem;
    margin-right: 0;
}

.button-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
</style>