{{-- Enhanced Primary Button Component --}}
@props([
    'size' => 'md',
    'variant' => 'primary',
    'icon' => null,
    'iconPosition' => 'left',
    'loading' => false,
    'disabled' => false
])

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

$variantClasses = [
    'primary' => 'btn-primary',
    'secondary' => 'btn-secondary',
    'success' => 'btn-success',
    'warning' => 'btn-warning',
    'danger' => 'btn-danger'
];

$classes = $variantClasses[$variant] . ' ' . $sizeClasses[$size];

if ($disabled || $loading) {
    $classes .= ' opacity-50 cursor-not-allowed';
}
@endphp

<button
    {{ $attributes->merge([
        'type' => 'submit',
        'class' => $classes,
        'disabled' => $disabled || $loading
    ]) }}
>
    @if($loading)
        <div class="loading-spinner mr-2"></div>
    @elseif($icon && $iconPosition === 'left')
        <span class="icon mr-2">
            {!! $icon !!}
        </span>
    @endif

    {{ $slot }}

    @if($icon && $iconPosition === 'right')
        <span class="icon ml-2">
            {!! $icon !!}
        </span>
    @endif
</button>




{{-- Code awal  --}}
{{-- <button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150']) }}>
    {{ $slot }}
</button> --}}