@props(['icon' => null, 'href' => null, 'danger' => false, 'disabled' => false])

@php
    $tone = $danger
        ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-500/10'
        : 'text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-700/60';

    $classes = "flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium transition {$tone}";
@endphp

@if ($disabled)
    {{-- Shown but visibly unavailable, rather than hidden: a menu whose contents
         change per row is harder to learn than one where the same items are
         always in the same place. --}}
    <span class="flex w-full cursor-not-allowed items-center gap-2.5 rounded-lg px-3 py-2 text-sm
                 font-medium text-slate-400 opacity-60 dark:text-slate-500">
        @if ($icon)<x-icon :name="$icon" class="size-4 shrink-0" />@endif
        {{ $slot }}
    </span>
@elseif ($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
        @if ($icon)<x-icon :name="$icon" class="size-4 shrink-0" />@endif
        {{ $slot }}
    </a>
@else
    <button type="submit" {{ $attributes->merge(['class' => $classes]) }}>
        @if ($icon)<x-icon :name="$icon" class="size-4 shrink-0" />@endif
        {{ $slot }}
    </button>
@endif