@props([
    'show' => true,
    'loading' => false,
])

<style>
    @keyframes bounce-button {

        0%,
        20%,
        50%,
        80%,
        100% {
            transform: translateY(0);
        }

        40% {
            transform: translateY(-8px);
        }

        60% {
            transform: translateY(-4px);
        }
    }

    .custom-bounce {
        animation: bounce-button 1s ease-in-out infinite;
    }

    .no-bounce {
        animation: none !important;
    }
</style>

<button type="submit" x-show="{{ $show }}" :disabled="{{ $loading }}"
    class="group px-8 py-3 bg-gradient-to-r from-emerald-500 to-green-600 text-white rounded-xl hover:from-emerald-600 hover:to-green-700 transition-all duration-300 flex items-center justify-center shadow-md hover:shadow-lg transform custom-bounce disabled:opacity-70"
    :class="{ 'no-bounce': {{ $loading }} }">
    <svg x-show="{{ $loading }}" class="animate-spin h-5 w-5 mr-3 text-white" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
    </svg>
    <span x-text="{{ $loading }} ? '{{ trans('siri.loading') }}' : '{{ trans('siri.submit') }}'"></span>
    <svg x-show="!{{ $loading }}" xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform duration-300" fill="none"
        viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
</button>