@props(['hoverBgThird' => false, 'type' => 'button', 'centerX', 'textColour' => 'xwhite', 'bgColour' => 'primary', 'icon', 'text'])

<div {{ $attributes->class(['']) }}>
    <button
        type="{{ $type }}"
        class="{{ $centerX ? 'left-1/2 -translate-x-1/2' : '' }} relative w-[88vw] mt-8 mb-4 px-6 py-4 rounded text-xl md:w-auto md:px-10 lg:transition-all lg:hover:bg-{{ $hoverBgThird ? 'third' : 'second' }} text-{{ $textColour }} bg-{{ $bgColour }}"
    >
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-3/4 p-2 bg-xwhite rounded-full shadow-button">
            <i class="{{ $icon }} text-second"></i>
        </div>
        {{ $text }}
    </button>
</div>