@props(['url' => null])

<button type="button" onclick="{{ $url ? "window.location.href='$url'" : 'history.back()' }}"
    class="relative w-48 font-sans text-xl font-semibold text-center text-black bg-white rounded-2xl h-14 group mt-5">
    <div
        class="bg-principal rounded-xl h-12 w-1/4 flex items-center justify-center absolute left-1 top-[4px] group-hover:w-[184px] z-10 duration-500">
        <svg width="25px" height="25px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path fill="#ffff" d="M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64z"></path>
            <path fill="#ffff"
                d="m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312L237.248 512z">
            </path>
        </svg>
    </div>
    <p class="translate-x-2">Regresar</p>
</button>