@props([
    'icon' => null,
    'iconClass' => 'size-4',
    'href' => null,
    'active' => false,
    'disabled' => false,
    'danger' => false,
])

@php
    $tag = $href ? 'a' : 'button';
    
    $baseClasses = 'w-full flex items-center gap-3 px-4 py-2.5 text-sm text-left transition-colors';
    
    $stateClasses = match(true) {
        $disabled => 'opacity-50 cursor-not-allowed text-base/50',
        $danger => 'text-danger hover:bg-danger/10',
        $active => 'bg-primary/10 text-primary font-medium',
        default => 'text-base/80 hover:bg-neutral/10 hover:text-base/90',
    };
    
    $classes = "$baseClasses $stateClasses";
@endphp

@if($href && !$disabled)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
@else
    <button type="button" {{ $disabled ? 'disabled' : '' }} {{ $attributes->merge(['class' => $classes]) }}>
@endif

    @if($icon)
        <x-dynamic-component :component="$icon" class="{{ $iconClass }} flex-shrink-0" />
    @endif
    
    <span class="flex-1">{{ $slot }}</span>

@if($href && !$disabled)
    </a>
@else
    </button>
@endif