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

@php
$variantClasses = [
    'primary' => 'bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500 active:bg-primary-700',
    'secondary' => 'bg-slate-100 text-slate-700 hover:bg-slate-200 focus:ring-slate-400 active:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600',
    'danger' => 'bg-rose-500 text-white hover:bg-rose-600 focus:ring-rose-500 active:bg-rose-700',
    'ghost' => 'bg-transparent text-slate-600 hover:bg-slate-100 focus:ring-slate-400 dark:text-slate-300 dark:hover:bg-slate-700',
    'success' => 'bg-emerald-500 text-white hover:bg-emerald-600 focus:ring-emerald-500 active:bg-emerald-700',
];

$sizeClasses = [
    'xs' => 'px-2.5 py-1.5 text-xs rounded-xl',
    'sm' => 'px-3 py-2 text-sm rounded-full',
    'md' => 'px-4 py-2.5 text-sm rounded-xl',
    'lg' => 'px-5 py-3 text-base rounded-xl',
];

$classes = 'inline-flex items-center justify-center gap-2 font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60';
$classes .= ' '.($variantClasses[$variant] ?? $variantClasses['primary']);
$classes .= ' '.($sizeClasses[$size] ?? $sizeClasses['md']);

$iconPaths = [
    'camera' => 'M4 7a2 2 0 012-2h2l1-1h6l1 1h2a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V7zm8 10a4 4 0 100-8 4 4 0 000 8z',
    'plus' => 'M12 5v14m-7-7h14',
    'check' => 'M5 13l4 4L19 7',
    'trash' => 'M6 7h12M9 7V5h6v2m-7 4v6m4-6v6',
    'arrow-right' => 'M5 12h14m-4-4l4 4-4 4',
    'download' => 'M12 3v12m0 0l4-4m-4 4l-4-4M5 19h14',
    'upload' => 'M12 21V9m0 0l4 4m-4-4l-4 4M5 5h14',
    'sparkles' => 'M12 3l1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8L12 3z',
];

$iconPath = $icon ? ($iconPaths[$icon] ?? null) : null;
@endphp

@if ($href)
    <a
        href="{{ $href }}"
        {{ $attributes->except(['class'])->merge(['class' => $classes.($loading ? ' pointer-events-none' : '')]) }}
        @if($loading) aria-disabled="true" @endif
    >
        @if($loading)
            <x-loading-spinner size="sm" class="text-current" />
            <span>Loading...</span>
        @else
            @if($iconPath)
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="{{ $iconPath }}"></path>
                </svg>
            @endif
            <span>{{ $slot }}</span>
        @endif
    </a>
@else
    <button
        type="{{ $type }}"
        {{ $attributes->except(['class'])->merge(['class' => $classes]) }}
        @if($loading) disabled @endif
    >
        @if($loading)
            <x-loading-spinner size="sm" class="text-current" />
            <span>Loading...</span>
        @else
            @if($iconPath)
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="{{ $iconPath }}"></path>
                </svg>
            @endif
            <span>{{ $slot }}</span>
        @endif
    </button>
@endif