@props(['label', 'target', 'bgColorClass' => 'bg-secondary', 'roundedClass' => 'rounded-lg'])
<button wire:loading.class="opacity-50"
    {{ $attributes->merge(['type' => 'submit', 'class' => "flex justify-center text-center items-center {$bgColorClass} {$roundedClass} text-sm w-full text-white px-5 py-2.5 cursor-pointer hover:bg-secondary-variant duration-300"]) }}>
    <svg wire:loading wire:loading.delay.longer wire:target="{{ $target }}" class="animate-spin" width="25px"
        height="25px" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg" transform="rotate(45)"
        stroke="#f96207" stroke-width="0.00024000000000000003">
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
        <g id="SVGRepo_iconCarrier">
            <path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd"
                d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                fill="#ffffff"></path>
            <path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="#ffffff"></path>
        </g>
    </svg>
    <span wire:loading wire:target="{{ $target }}" class="w-1"></span>
    <span>
        {{ $label }}
    </span>
</button>
