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

@php
    $baseClasses = 'inline-flex items-center gap-1.5 rounded-lg border font-medium text-xs transition-all duration-150 cursor-pointer select-none whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed';

    $variants = [
        'default'   => 'bg-[#0d1220] text-slate-300 border-[#232b3d] hover:bg-[#161d2d] hover:text-white hover:border-[#3a4257]',
        'secondary' => 'bg-[#0d1220] text-slate-300 border-[#232b3d] hover:bg-[#161d2d] hover:text-white hover:border-[#3a4257]',
        'primary'   => 'bg-[#4b82f7] text-white border-[#4b82f7] hover:bg-[#3d6fe0] shadow-sm',
        'success'   => 'bg-[#21c274] text-white border-[#21c274] hover:bg-[#1da865] shadow-sm',
        'danger'    => 'bg-[#ef4a5f] text-white border-[#ef4a5f] hover:bg-[#d63d51] shadow-sm',
        'warning'   => 'bg-[#f0a939] text-white border-[#f0a939] hover:bg-[#d8952d] shadow-sm',
        'ghost'     => 'bg-transparent text-slate-400 border-transparent hover:bg-white/5 hover:text-slate-200',
    ];

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

    $classes = implode(' ', [
        $baseClasses,
        $variants[$variant] ?? $variants['secondary'],
        $sizes[$size] ?? $sizes['md'],
    ]);
@endphp

<button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}>
    @if($icon)
        <i class="{{ $icon }}"></i>
    @endif
    @if(trim($slot))
        <span>{{ $slot }}</span>
    @endif
</button>