@props([
    'variant' => 'primary',   // primary | secondary | ghost | danger | success
    'size' => 'md',           // sm | md | lg
    'href' => null,
    'type' => 'button',
    'icon' => false,          // square icon-only button
])

@php
    $base = 'relative inline-flex items-center justify-center gap-2 font-medium '
        .'rounded-lg border transition-all duration-200 ease-out '
        .'disabled:opacity-50 disabled:pointer-events-none '
        .'aria-disabled:opacity-50 aria-disabled:pointer-events-none '
        .'active:translate-y-px whitespace-nowrap';

    $variants = [
        'primary' => 'bg-electric-500 border-electric-400 text-white '
            .'hover:bg-electric-400 hover:shadow-glow-sm hover:border-electric-300',

        'secondary' => 'bg-raised border-line-strong text-silver-100 '
            .'hover:bg-surface hover:border-electric-600',

        'ghost' => 'bg-transparent border-transparent text-silver-300 '
            .'hover:text-silver-100 hover:bg-raised',

        'danger' => 'bg-danger/10 border-danger/40 text-danger '
            .'hover:bg-danger hover:text-white hover:border-danger',

        'success' => 'bg-success/10 border-success/40 text-success '
            .'hover:bg-success hover:text-white hover:border-success',
    ];

    $sizes = $icon
        ? ['sm' => 'h-8 w-8', 'md' => 'h-10 w-10', 'lg' => 'h-12 w-12']
        : ['sm' => 'h-8 px-3 text-xs', 'md' => 'h-10 px-4 text-sm', 'lg' => 'h-12 px-6 text-base'];

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

@if ($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
        {{ $slot }}
    </a>
@else
    <button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}>
        {{ $slot }}
    </button>
@endif