@props([
    'variant' => 'default',
    'size' => 'default',
    'href' => null, // If provided, renders as <a>
])

@php
    $baseClass =
        'inline-flex max-w-full items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';

    $variants = [
        'default' => 'bg-slate-900 text-slate-50 hover:bg-slate-900/90 shadow-xs',
        'destructive' => 'bg-red-500 text-slate-50 hover:bg-red-500/90 shadow-xs',
        'outline' => 'border border-slate-200 bg-white hover:bg-slate-50 hover:text-slate-900',
        'secondary' => 'bg-slate-100 text-slate-900 hover:bg-slate-200/80',
        'ghost' => 'hover:bg-slate-100 hover:text-slate-900',
        'link' => 'text-slate-900 underline-offset-4 hover:underline',
        'primary' => 'bg-green-600 text-white hover:bg-green-700 shadow-xs', // Explicit Primary
        'faint' => 'bg-green-50 text-green-700 hover:bg-green-100 border border-green-100', // Green Faint
        'destructive-faint' => 'bg-red-50 text-red-600 hover:bg-red-100',
        'info' => 'bg-blue-600 text-white hover:bg-blue-700 shadow-xs',
    ];

    $sizes = [
        'default' => 'h-10 px-4 py-2',
        'sm' => 'h-9 rounded-md px-3',
        'lg' => 'h-11 rounded-md px-8',
        'icon' => 'h-10 w-10',
    ];

    $classes = $baseClass . ' ' . $variants[$variant] . ' ' . $sizes[$size];
@endphp

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