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

@php
    $baseClasses = 'inline-flex items-center justify-center rounded-md transition-colors';

    $sizeClasses =
        [
            'sm' => 'px-3 py-1.5 text-xs',
            'md' => 'px-4 py-2 text-sm',
            'lg' => 'px-5 py-2.5 text-base',
        ][$size] ?? 'px-4 py-2 text-sm';

    $variantClasses =
        [
            'primary' => 'bg-blue-600 hover:bg-blue-700 text-white',
            'secondary' => 'bg-gray-600 hover:bg-gray-700 text-white',
            'success' => 'bg-green-600 hover:bg-green-700 text-white',
            'danger' => 'bg-red-600 hover:bg-red-700 text-white',
            'outline' => 'border border-gray-300 text-gray-700 hover:bg-gray-50',
        ][$variant] ?? 'bg-blue-600 hover:bg-blue-700 text-white';

    $disabledClasses = $disabled ? 'opacity-50 cursor-not-allowed' : '';

    $classes = "{$baseClasses} {$sizeClasses} {$variantClasses} {$disabledClasses}";
@endphp

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