@php
$baseClasses = 'inline-flex items-center justify-center rounded-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition ease-in-out duration-150';

$variants = [
    'primary' => 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
    'secondary' => 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
    'info' => 'bg-cyan-600 text-white hover:bg-cyan-700 focus:ring-cyan-500',
    'success' => 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500',
    'warning' => 'bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-400',
    'danger' => 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
];

$sizes = [
    'sm' => 'text-xs px-3 py-1.5',
    'md' => 'text-sm px-4 py-2',
    'lg' => 'text-base px-6 py-3',
];

$variantClass = $variants[$variant] ?? $variants['primary'];
$sizeClass = $sizes[$size] ?? $sizes['md'];

$classes = "$baseClasses $variantClass $sizeClass";

// Simple spinner SVG for loading indicator
$spinner = <<<'SVG'
<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <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-8v4a4 4 0 00-4 4H4z"></path>
</svg>
SVG;
@endphp

@if ($href)
    <a href="{{ $href }}" 
        {{ $attributes->merge(['class' => $classes]) }}
        @if ($loading && $attributes->has('wire:click'))
            wire:loading.attr="aria-disabled"
            wire:target="{{ $attributes->get('wire:click') }}"
            onclick="return false;"
        @endif
    >
        @if ($icon)
            <x-dynamic-component :component="$icon" class="w-4 h-4 mr-2" />
        @endif

        <span class="flex items-center">
            @if ($loading)
                <span wire:loading.remove wire:target="{{ $attributes->get('wire:click') ?: '' }}">
                    {{ $slot }}
                </span>

                <span wire:loading wire:target="{{ $attributes->get('wire:click') ?: '' }}">
                    {!! $spinner !!}
                </span>
            @else
                {{ $slot }}
            @endif
        </span>

        @if ($iconRight)
            <x-dynamic-component :component="$iconRight" class="w-4 h-4 ml-2" />
        @endif
    </a>
@else
    <button type="{{ $type }}" 
        {{ $attributes->merge(['class' => $classes]) }}
        @if ($loading)
            wire:loading.attr="disabled"
            wire:target="{{ $attributes->get('wire:click') ?: '' }}"
        @endif
    >
        @if ($icon)
            <x-dynamic-component :component="$icon" class="w-4 h-4 mr-2" />
        @endif

        <span class="flex items-center">
            @if ($loading)
                <span wire:loading.remove wire:target="{{ $attributes->get('wire:click') ?: '' }}">
                    {{ $slot }}
                </span>

                <span wire:loading wire:target="{{ $attributes->get('wire:click') ?: '' }}">
                    {!! $spinner !!}
                </span>
            @else
                {{ $slot }}
            @endif
        </span>

        @if ($iconRight)
            <x-dynamic-component :component="$iconRight" class="w-4 h-4 ml-2" />
        @endif
    </button>
@endif