@props(['href' => null, 'icon' => null, 'danger' => false, 'navigate' => true])
@php
    $classes = 'flex w-full items-center gap-2.5 px-3.5 py-2 text-left text-sm transition-colors '
        .($danger ? 'text-rose-700 hover:bg-rose-50' : 'text-slate-700 hover:bg-slate-50 hover:text-slate-900');
@endphp
@if ($href)
    <a href="{{ $href }}" @if ($navigate) wire:navigate @endif role="menuitem" {{ $attributes->merge(['class' => $classes]) }}>
        @if ($icon)<x-icon :name="$icon" class="size-4 opacity-70" />@endif{{ $slot }}
    </a>
@else
    {{-- type defaults to "button" but may be overridden (e.g. type="submit" for the sign-out form). --}}
    <button role="menuitem" {{ $attributes->merge(['type' => 'button', 'class' => $classes]) }}>
        @if ($icon)<x-icon :name="$icon" class="size-4 opacity-70" />@endif{{ $slot }}
    </button>
@endif