@props([
    'color' => 'blue',
    'size' => 'md',
    'outline' => false,
    'icon' => null,
    'iconPosition' => 'left', // left or right
])

@php
    // اﻷلوان المتاحة
    $colors = [
        'blue' => !$outline 
            ? 'bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500' 
            : 'border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 focus:ring-blue-500',
        'green' => !$outline 
            ? 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-500' 
            : 'border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 focus:ring-green-500',
        'red' => !$outline 
            ? 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-500' 
            : 'border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 focus:ring-red-500',
        'yellow' => !$outline 
            ? 'bg-yellow-500 hover:bg-yellow-600 text-white focus:ring-yellow-500' 
            : 'border-yellow-500 text-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 focus:ring-yellow-500',
        'gray' => !$outline 
            ? 'bg-gray-600 hover:bg-gray-700 text-white focus:ring-gray-500' 
            : 'border-gray-600 text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-900/20 focus:ring-gray-500',
    ];
    
    // أحجام الزر
    $sizes = [
        'sm' => 'px-3 py-1.5 text-xs',
        'md' => 'px-4 py-2 text-sm',
        'lg' => 'px-5 py-2.5 text-base',
        'xl' => 'px-6 py-3 text-base',
    ];
    
    $buttonClasses = $colors[$color] ?? $colors['blue'];
    $sizeClasses = $sizes[$size] ?? $sizes['md'];
    
    $borderClasses = $outline ? 'border' : 'border border-transparent';
    $baseClasses = "inline-flex items-center justify-center {$sizeClasses} {$borderClasses} rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150";
@endphp

<button {{ $attributes->merge(['class' => "{$baseClasses} {$buttonClasses}", 'type' => 'button']) }}>
    @if($icon && $iconPosition === 'left')
        <span class="ml-2">
            {{ $icon }}
        </span>
    @endif
    
    {{ $slot }}
    
    @if($icon && $iconPosition === 'right')
        <span class="mr-2">
            {{ $icon }}
        </span>
    @endif
</button>