@props(['kind' => 'primary', 'href' => null])
@php
    $tag = !empty($href) ? 'a' : 'button';
@endphp
<{{ $tag }}
    {{ $attributes->except('x-text')->merge(['href' => $href])->class([
            'inline-flex px-8 py-4 font-bold text-sm rounded-full items-center transition-colors nowrap relative group overflow-clip whitespace-nowrap',
            'bg-pink text-white shadow-main' => $kind === 'primary',
            'bg-deepblue text-white shadow-xl' => $kind === 'secondary',
        ]) }}>
    <span
        class="block bg-pink-hover w-full h-full absolute inset-0 rounded-full group-hover:translate-x-0 -translate-x-full transition-transform duration-300"></span>
    <span class="relative z-[1] inline-flex gap-2"
        {{ $attributes->has('x-text') ? 'x-text=' . $attributes->get('x-text') : '' }}>{{ $slot }}</span>
    </{{ $tag }}>