@props(['type' => 'primary', 'size' => 'md', 'disabled' => false])

@php
    $classes = 'btn rounded-md focus:outline-none transition duration-150 ease-in-out';
    
    // تحديد النوع
    if ($type === 'primary') {
        $classes .= ' bg-blue-600 hover:bg-blue-700 text-white';
    } elseif ($type === 'secondary') {
        $classes .= ' bg-gray-500 hover:bg-gray-600 text-white';
    } elseif ($type === 'success') {
        $classes .= ' bg-green-500 hover:bg-green-600 text-white';
    } elseif ($type === 'danger') {
        $classes .= ' bg-red-500 hover:bg-red-600 text-white';
    } elseif ($type === 'warning') {
        $classes .= ' bg-yellow-500 hover:bg-yellow-600 text-white';
    } elseif ($type === 'info') {
        $classes .= ' bg-teal-500 hover:bg-teal-600 text-white';
    } elseif ($type === 'light') {
        $classes .= ' bg-gray-100 hover:bg-gray-200 text-gray-800';
    } elseif ($type === 'dark') {
        $classes .= ' bg-gray-800 hover:bg-gray-900 text-white';
    } elseif ($type === 'outline-primary') {
        $classes .= ' border border-blue-600 text-blue-600 hover:bg-blue-50';
    } elseif ($type === 'outline-secondary') {
        $classes .= ' border border-gray-500 text-gray-500 hover:bg-gray-50';
    } elseif ($type === 'link') {
        $classes .= ' text-blue-600 hover:text-blue-800 hover:underline';
    }
    
    // تحديد الحجم
    if ($size === 'sm') {
        $classes .= ' px-3 py-1 text-sm';
    } elseif ($size === 'md') {
        $classes .= ' px-4 py-2';
    } elseif ($size === 'lg') {
        $classes .= ' px-6 py-3 text-lg';
    }
    
    // تحديد حالة التعطيل
    if ($disabled) {
        $classes .= ' opacity-50 cursor-not-allowed';
    }
@endphp

<button {{ $attributes->merge(['class' => $classes, 'disabled' => $disabled]) }}>
    {{ $slot }}
</button>