@props([
  'href' => null,
  'disabled' => false,
  'icon' => null, // lucide icon name, ex: "shield"
  'iconWrapClass' => 'w-8 h-8 rounded-lg flex items-center justify-center bg-secondary text-foreground',
])

@php
  $tag = ($href && ! $disabled) ? 'a' : 'button';
  $base = 'w-full flex items-center gap-3 px-4 py-3.5 text-left active:bg-secondary/50 transition-colors';
  $attrs = $attributes->merge([
    'class' => $base,
  ]);
@endphp

@if ($tag === 'a')
  <a href="{{ $href }}" {{ $attrs }}>
    <div class="{{ $iconWrapClass }}">
      @if ($icon)
        <x-dynamic-component :component="'lucide-'.$icon" class="w-[18px] h-[18px]" />
      @endif
    </div>
    <span class="flex-1 text-[15px] text-foreground">{{ $slot }}</span>
    <x-lucide-chevron-right class="w-4 h-4 text-muted-foreground/40" />
  </a>
@else
  <button type="button" @disabled($disabled) {{ $attrs }}>
    <div class="{{ $iconWrapClass }}">
      @if ($icon)
        <x-dynamic-component :component="'lucide-'.$icon" class="w-[18px] h-[18px]" />
      @endif
    </div>
    <span class="flex-1 text-[15px] text-foreground">{{ $slot }}</span>
    <x-lucide-chevron-right class="w-4 h-4 text-muted-foreground/40" />
  </button>
@endif