@props([
    'variant' => 'primary', // primary, secondary, success, danger, warning, info, outline
    'size' => 'md', // sm, md, lg
    'icon' => null,
    'type' => 'button',
    'href' => null,
])

@php
    $base = 'inline-flex items-center justify-center gap-2 font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';

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

    $variants = [
        'primary' => 'bg-primary-600 hover:bg-primary-700 text-white shadow-soft hover:shadow-glow focus:ring-primary-500',
        'secondary' => 'bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 focus:ring-slate-400',
        'success' => 'bg-emerald-600 hover:bg-emerald-700 text-white shadow-soft hover:shadow-lg focus:ring-emerald-500',
        'danger' => 'bg-rose-600 hover:bg-rose-700 text-white shadow-soft hover:shadow-lg focus:ring-rose-500',
        'warning' => 'bg-amber-500 hover:bg-amber-600 text-white shadow-soft focus:ring-amber-400',
        'info' => 'bg-sky-600 hover:bg-sky-700 text-white shadow-soft focus:ring-sky-500',
        'outline' => 'border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 focus:ring-slate-400',
        'ghost' => 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 focus:ring-slate-400',
    ];

    $cls = "$base {$sizes[$size]} {$variants[$variant]}";
@endphp

@if($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $cls]) }}>
        @if($icon)<i data-lucide="{{ $icon }}" class="w-4 h-4"></i>@endif
        {{ $slot }}
    </a>
@else
    <button type="{{ $type }}" {{ $attributes->merge(['class' => $cls]) }}>
        @if($icon)<i data-lucide="{{ $icon }}" class="w-4 h-4"></i>@endif
        {{ $slot }}
    </button>
@endif