@props([
    'url' => null,
    'route' => null,
    'blank' => false,
    'icon' => null,
    'label' => '',
    'balloonIcon' => null,
    'balloon' => null,
])

<div>
    <a href="{{ $url ?: ($route ? route($route) : '#') }}" {{ $blank ? 'target="__blank"' : '' }}
        class="flex relative items-center justify-center gap-1 px-4 py-2 text-center text-white rounded-md bg-gradient-to-t from-(--button-from) to-(--button-to) border-[2px] border-(--button-to)">
        @if ($balloon)
            <div
                class="absolute left-0 -top-4 text-xs flex items-center gap-1 px-2 py-1 font-extrabold uppercase bg-(--color-result) rounded-full animate-pulse text-black">
                @isset($balloonIcon)
                    <x-icon class="w-3 h-3" :name="$balloonIcon" />
                @endisset
                <span>{{ $balloon }}</span>
            </div>
        @endif
        @isset($icon)
            <div>
                <x-icon :name="$icon" class="w-3" />
            </div>
        @endisset
        <div class="text-xs font-extrabold uppercase">
            {{ $label }}
        </div>
    </a>
</div>