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

@php
    $base = 'inline-flex items-center justify-center gap-2 font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';

    $sizes = [
        'sm' => 'h-9 px-3 text-sm rounded-xl',
        'md' => 'h-10 px-4 text-sm rounded-xl',
    ];

    $variants = [
        'primary' => 'bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm',
        'secondary' => 'bg-white text-zinc-900 ring-1 ring-zinc-950/10 hover:bg-zinc-50',
        'danger' => 'bg-rose-600 text-white hover:bg-rose-700 shadow-sm',
        'ghost' => 'bg-transparent text-zinc-700 hover:bg-zinc-100',
    ];

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

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