@props(['label', 'icon' => null, 'url' => null])

@php
    $isButton = $attributes->has('type');
@endphp

@if ($isButton)
    <button
        {{ $attributes->merge(['class' => 'flex items-center justify-center border border-(--border-button) gap-1 px-4 py-2 text-center text-white rounded-md bg-gradient-to-t shadow-xs shadow-fuchsia-950 from-(--button-bawah) to-(--button-atas) hover:from-(--button-bawah) hover:to-(--button-atas) hover:inset-shadow']) }}>
        @isset($icon)
            <div>
                <x-icon :name="$icon" class="w-3" />
            </div>
        @endisset
        <div class="text-xs">
            {{ $label }}
        </div>
    </button>
@else
    <a href="{{ $url ?? '#' }}"
        {{ $attributes->merge(['class' => 'flex items-center justify-center border border-(--border-button) gap-1 px-4 py-2 text-center text-white rounded-md bg-gradient-to-t shadow-xs shadow-fuchsia-950 from-(--button-bawah) to-(--button-atas) hover:from-(--button-bawah) hover:to-(--button-atas) hover:inset-shadow']) }}>
        @isset($icon)
            <div>
                <x-icon :name="$icon" class="w-3" />
            </div>
        @endisset
        <div class="text-xs">
            {{ $label }}
        </div>
    </a>
@endif