@props([
    'variant' => 'primary',
    'type' => 'button',
    'href' => null,
])

@php
    $baseClasses = 'inline-flex items-center justify-center px-4 py-2 border text-sm font-medium rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed';

    $variants = [
        'primary' => 'border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500',
        'secondary' => 'border-transparent text-white bg-slate-600 hover:bg-slate-700 focus:ring-slate-500',
        'success' => 'border-transparent text-white bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500',
        'danger' => 'border-transparent text-white bg-red-600 hover:bg-red-700 focus:ring-red-500',
        'warning' => 'border-transparent text-white bg-amber-500 hover:bg-amber-600 focus:ring-amber-500',
        'info' => 'border-transparent text-white bg-sky-500 hover:bg-sky-600 focus:ring-sky-500',
        'light' => 'border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-indigo-500',
    ];

    $classes = $baseClasses . ' ' . ($variants[$variant] ?? $variants['primary']);
@endphp

@if($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
        @if(isset($icon))
            <span class="mr-2 -ml-1">
                {{ $icon }}
            </span>
        @endif
        {{ $slot }}
    </a>
@else
    <button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}>
        @if(isset($icon))
            <span class="mr-2 -ml-1">
                {{ $icon }}
            </span>
        @endif
        {{ $slot }}
    </button>
@endif