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

@php
    $baseClasses = 'inline-flex items-center justify-center rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2';
    
    $variants = [
        'primary' => 'border border-transparent bg-indigo-600 text-white shadow-sm hover:bg-indigo-700 focus:ring-indigo-500',
        'secondary' => 'border border-transparent bg-gray-600 text-white shadow-sm hover:bg-gray-700 focus:ring-gray-500',
        'danger' => 'border border-transparent bg-red-600 text-white shadow-sm hover:bg-red-700 focus:ring-red-500',
        'warning' => 'border border-transparent bg-yellow-600 text-white shadow-sm hover:bg-yellow-700 focus:ring-yellow-500',
        'success' => 'border border-transparent bg-green-600 text-white shadow-sm hover:bg-green-700 focus:ring-green-500',
        'outline' => 'border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 focus:ring-indigo-500',
    ];

    $sizes = [
        'sm' => 'px-2.5 py-1.5 text-xs',
        'md' => 'px-4 py-2 text-sm',
        'lg' => 'px-6 py-3 text-base',
    ];

    $classes = $baseClasses . ' ' . $variants[$variant] . ' ' . $sizes[$size];
    if ($disabled) {
        $classes .= ' opacity-50 cursor-not-allowed';
    }
@endphp

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