@props([
    'backUrl' => null,
    'backLabel' => 'Back',
    'backClass' => 'btn btn-outline-secondary btn-lg px-5 rounded-3',
    'actionLabel' => 'Proceed to Apply',
    'actionClick' => 'proceedToApply',
    'actionClass' => 'btn btn-primary px-3 rounded-3',
    'actionLoadingText' => 'Saving...',
    'showBack' => true,
])

@php
    $containerClass = $showBack
        ? 'border-top mt-5 pt-4 d-flex justify-content-between flex-wrap gap-3 mb-5'
        : 'border-top mt-5 pt-4 d-flex justify-content-end flex-wrap gap-3 mb-5';
@endphp

<div class="{{ $containerClass }}">
    @if($showBack)
        <x-back-button :url="$backUrl" label="{{ $backLabel }}" class="{{ $backClass }}" />
    @endif

    <button
        type="button"
        class="{{ $actionClass }}"
        wire:click="{{ $actionClick }}"
        wire:loading.attr="disabled"
        wire:target="{{ $actionClick }}"
    >
        <span wire:loading.remove wire:target="{{ $actionClick }}">
            {{ $actionLabel }}
        </span>
        <span wire:loading wire:target="{{ $actionClick }}">
            {{ $actionLoadingText }}
        </span>
    </button>
</div>