@php
    $hover = $hover ?? '';
    $position = $position ?? '';
    $titleBtn = $titleBtn ?? ''; // Ensure $titleBtn is defined to avoid undefined variable
@endphp

@if ($type === 'a')
    <a href="{{ $url ?? '' }}"
        class="{{ $style ?? '' }} {{ $bgColor }} {{ $textColor }} inline-flex backdrop-blur-lg py-2 px-5 items-center justify-center text-base transition-all duration-300 ease-in-out cursor-pointer 
        @if ($hover === 'shine') hover:after:w-full hover:after:left-0 after:absolute after:h-full after:w-0 after:bottom-0 after:right-0 after:bg-white/[.15] after:-z-1 after:[transition:all_.3s_ease-in-out]
        @elseif ($hover === 'scaleup') hover:scale-105
        @elseif ($hover === 'up') hover:-translate-y-1 hover:shadow-2xl   
        @elseif ($hover === 'scaledown') hover:bg-rose-600 hover:-translate-y-1 hover:scale-90
        @elseif ($hover === 'opr') hover:bg-primary/[.80]
        @endif">

        @if ($position === 'before')
            <x-frontend::utility.icon icon="{{ $icon }}"></x-frontend::utility.icon>
            <span class="text-lg">{{ $titleBtn }}</span>
        @elseif ($position === 'after')
            <span class="text-lg">{{ $titleBtn }}</span>
            <x-frontend::utility.icon icon="{{ $icon }}"></x-frontend::utility.icon>
        @else
            <span class="text-lg">{{ $titleBtn }}</span>
        @endif
    </a>
@elseif ($type === 'button')
    <button type="submit"
        class="{{ $style ?? '' }} {{ $bgColor  ?? '' }} {{ $textColor ?? '' }} flex backdrop-blur-lg py-2 px-5 items-center justify-center text-base transition-all duration-300 ease-in-out cursor-pointer 
        @if ($hover === 'shine') hover:after:w-full hover:after:left-0 after:absolute after:h-full after:w-0 after:bottom-0 after:right-0 after:bg-white/[.15] after:-z-1 after:[transition:all_.3s_ease-in-out]
        @elseif ($hover === 'scaleup') hover:scale-105
        @elseif ($hover === 'up') hover:-translate-y-1 hover:shadow-2xl 
        @elseif ($hover === 'underline') -line-hover-btn 
        @elseif ($hover === 'scaledown') hover:bg-rose-600 hover:-translate-y-1 hover:scale-90
        @elseif ($hover === 'opr') hover:bg-primary/[.80]
        @endif">

        @if ($position === 'before')
            <x-frontend::utility.icon icon="{{ $icon }}"></x-frontend::utility.icon>
            <span class="text-lg">{{ $titleBtn }}</span>
        @elseif ($position === 'after')
            <span class="text-lg">{{ $titleBtn }}</span>
            <x-frontend::utility.icon icon="{{ $icon }}"></x-frontend::utility.icon>
        @else
            <span class="text-lg">{{ $titleBtn }}</span>
        @endif
    </button>
@endif