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

@php
    $tag = $href ? 'a' : 'button';

    $variants = [
        'primary' => 'bg-brand-600 text-white hover:bg-brand-700 focus-visible:outline-brand-600 dark:bg-brand-500 dark:hover:bg-brand-400 dark:focus-visible:outline-brand-400',
        'accent' => 'bg-blush-600 text-white hover:bg-blush-700 focus-visible:outline-blush-600 dark:bg-blush-500 dark:hover:bg-blush-400 dark:focus-visible:outline-blush-400',
        'outline' => 'border border-stone-300 bg-white text-stone-800 hover:bg-stone-50 focus-visible:outline-stone-400 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800',
        'ghost' => 'text-stone-600 hover:bg-stone-100 hover:text-stone-900 focus-visible:outline-stone-400 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-white',
        'danger' => 'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-600',
        'subtle-danger' => 'text-red-600 hover:bg-red-50 hover:text-red-700 focus-visible:outline-red-500 dark:text-red-400 dark:hover:bg-red-950/50',
    ];

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

    $classes = 'inline-flex items-center justify-center rounded-lg font-semibold tracking-tight transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer '
        . ($variants[$variant] ?? $variants['primary']) . ' '
        . ($sizes[$size] ?? $sizes['md']);
@endphp

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