@props([
    'type' => 'button',
    'color' => 'indigo',
    'disabled' => false
])

@php
    $baseClasses = 'px-6 py-2 font-bold rounded-lg shadow transition flex items-center gap-2 justify-center';
    $disabledClasses = 'disabled:opacity-50 disabled:cursor-not-allowed';
    
    $colorClasses = match ($color) {
        'indigo' => 'bg-indigo-600 hover:bg-indigo-700 text-white',
        'amber'  => 'bg-amber-600 hover:bg-amber-700 text-white',
        'red'    => 'bg-red-600 hover:bg-red-700 text-white',
        'gray'   => 'bg-gray-200 hover:bg-gray-300 text-gray-800',
        'transparent' => 'text-sm font-bold text-gray-500 hover:text-gray-700 shadow-none px-0 py-0',
        default  => 'bg-indigo-600 hover:bg-indigo-700 text-white',
    };
@endphp

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