@props([
    'variant' => 'primary',
    'size' => 'md',
    'href' => null,
    'type' => 'button',
    'full' => false,
    'iconOnly' => false,
    'disabled' => false,
    'loading' => false,
    'loadingText' => '로딩 중',
    'target' => null,
    'rel' => null,
])

@php
    $buttonClass = trim(implode(' ', array_filter([
        'btn',
        "btn-{$size}",
        "btn-{$variant}",
        $full ? 'btn-full' : null,
        $iconOnly ? 'btn-icon' : null,
        $disabled ? 'btn-disabled' : null,
        $loading ? 'btn-disabled' : null,
    ])));

    $linkRel = $rel ?? (($target === '_blank' && ! $disabled) ? 'noopener noreferrer' : null);
    $isLoading = (bool) $loading;
@endphp

@if ($href && ! $disabled)
    <a
        {{ $attributes->merge(['href' => $href, 'class' => $buttonClass, 'target' => $target, 'rel' => $linkRel]) }}
    >
        {{ $slot }}
    </a>
@else
    <button
        {{ $attributes->merge(['type' => $type, 'class' => $buttonClass]) }}
        @disabled($disabled || $isLoading)
        @if ($href) aria-disabled="true" tabindex="-1" @endif
        @if ($isLoading) aria-busy="true" data-loading="true" @endif
    >
        <span class="inline-flex items-center gap-2" data-button-label @if ($isLoading) hidden @endif>
            {{ $slot }}
        </span>
        <span class="{{ $isLoading ? 'inline-flex' : 'hidden' }} items-center gap-2" data-button-spinner>
            <svg viewBox="0 0 24 24" class="h-4 w-4 animate-spin" fill="none" aria-hidden="true">
                <circle cx="12" cy="12" r="8.5" stroke="currentColor" stroke-width="2" opacity="0.25"></circle>
                <path d="M20.5 12a8.5 8.5 0 0 0-8.5-8.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>
            <span>{{ $loadingText }}</span>
        </span>
    </button>
@endif