@props([
    'variant' => 'primary',
    'size' => 'md',
    'icon' => null,
    'iconRight' => null,
    'href' => null,
    'loading' => null,
    'type' => 'button',
])

@php
    $base = 'inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors disabled:opacity-60 disabled:pointer-events-none whitespace-nowrap';
    $variants = [
        'primary' => 'bg-emerald-600 text-white hover:bg-emerald-700',
        'secondary' => 'bg-secondary text-secondary-foreground hover:bg-muted',
        'outline' => 'border border-gray-200 dark:border-border text-foreground hover:bg-gray-50 dark:hover:bg-muted',
        'danger' => 'bg-rose-600 text-white hover:bg-rose-700',
        'ghost' => 'text-foreground hover:bg-gray-100 dark:hover:bg-muted',
    ];
    $sizes = [
        'sm' => 'px-3 py-1.5 text-sm',
        'md' => 'px-4 py-2 text-sm',
        'lg' => 'px-5 py-2.5 text-base',
        'icon' => 'p-2',
    ];
    $classes = $base.' '.($variants[$variant] ?? $variants['primary']).' '.($sizes[$size] ?? $sizes['md']);
@endphp

@if ($href)
    <a href="{{ $href }}" wire:navigate {{ $attributes->merge(['class' => $classes]) }}>
        @if ($icon)<x-ui.icon :name="$icon" size="w-4 h-4" />@endif
        <span>{{ $slot }}</span>
        @if ($iconRight)<x-ui.icon :name="$iconRight" size="w-4 h-4" />@endif
    </a>
@else
    <button type="{{ $type }}"
        @if ($loading) wire:loading.attr="disabled" wire:target="{{ $loading }}" @endif
        {{ $attributes->merge(['class' => $classes]) }}>
        @if ($loading)
            <svg wire:loading wire:target="{{ $loading }}" class="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
            </svg>
        @endif
        @if ($icon)
            <span @if ($loading) wire:loading.remove wire:target="{{ $loading }}" @endif class="inline-flex">
                <x-ui.icon :name="$icon" size="w-4 h-4" />
            </span>
        @endif
        <span>{{ $slot }}</span>
        @if ($iconRight)<x-ui.icon :name="$iconRight" size="w-4 h-4" />@endif
    </button>
@endif