@props([
    'href' => null,
    'type' => 'button',
    'size' => 'md',     // sm|md
    'variant' => 'primary', // primary|secondary|ghost|danger
])

@php
    $base = 'inline-flex items-center justify-center gap-2 rounded-xl font-semibold transition focus:outline-none focus:ring-4 disabled:cursor-not-allowed disabled:opacity-60';
    $sizes = [
        'sm' => 'px-3 py-2 text-sm',
        'md' => 'px-4 py-2.5 text-sm',
    ][$size] ?? 'px-4 py-2.5 text-sm';

    $variants = [
        'primary' => 'bg-ink-700 text-white shadow-sm hover:bg-ink-800 focus:ring-ink-200',
        'secondary' => 'bg-brand-600 text-white shadow-sm hover:bg-brand-700 focus:ring-brand-200',
        'ghost' => 'border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 focus:ring-brand-200',
        'danger' => 'bg-rose-600 text-white shadow-sm hover:bg-rose-700 focus:ring-rose-200',
    ][$variant] ?? 'bg-ink-700 text-white shadow-sm hover:bg-ink-800 focus:ring-ink-200';

    $classes = trim($base.' '.$sizes.' '.$variants);
@endphp

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