@props([
  'title' => '',                 // e.g. 'Proximité'
  'icon' => null,                // e.g. 'assets/images/svg_icons/nearby.svg'
  'href' => null,                // absolute or relative URL
  'route' => null,               // route name (alternative to href)
  'routeParams' => [],           // route params
  'badge' => null,               // e.g. 'Soon'
  'badgeSize' => 'sm',           // sm | md | lg (depends on your kt-badge sizes)
  'external' => false,           // open in new tab if true
  'tabindex' => '0',
  'active' => null,              // true/false to force state; null = auto
  'activeWhen' => null,          // routeIs pattern, e.g. 'admin.reports*'
])

@php
  // Resolve href
  $href = $href ?? (Route::has($route) ? route($route, $routeParams) : "");

  // Determine active state
  $isActive = match (true) {
    !is_null($active)             => (bool) $active,
    !is_null($activeWhen)         => request()->routeIs($activeWhen),
    !is_null($route)              => request()->routeIs($route),
    !is_null($href)               => url()->current() === url($href),
    default                       => false,
  };

  $wrapperClasses = 'kt-menu-item' . ($isActive ? ' active' : '');

  $labelClasses = implode(' ', [
    'kt-menu-label',
    'border border-transparent items-center grow',
    'kt-menu-item-active:bg-accent/60',
    'dark:menu-item-active:border-border',
    'kt-menu-item-active:rounded-lg',
    'hover:bg-accent/60 hover:rounded-lg',
    'gap-[14px] ps-[10px] pe-[10px] py-[8px]',
  ]);

  $titleClasses = implode(' ', [
    'kt-menu-title text-2sm font-normal text-foreground',
    'kt-menu-item-active:text-primary kt-menu-item-active:font-semibold',
    'kt-menu-link-hover:!text-primary',
  ]);

  $tag = $href ? 'a' : 'button';
@endphp

<div {{ $attributes->merge(['class' => $wrapperClasses]) }}>
  <{{ $tag }}
    @if($tag === 'a') href="{{ $href }}" @else type="button" @endif
    @if($external && $tag === 'a') target="_blank" rel="noopener noreferrer" @endif
    tabindex="{{ $tabindex }}"
    class="{{ $labelClasses }}"
  >
    <span class="kt-menu-icon items-start text-muted-foreground w-[20px]">
      @if($icon)
        <img alt="" src="{{ asset($icon) }}" />
      @else
        <span class="inline-block h-2 w-2 rounded-full bg-current"></span>
      @endif
    </span>

    <span class="{{ $titleClasses }}">
      {{ $title }}
    </span>

    @if($badge)
      <span class="kt-menu-badge me-[-10px]">
        <span class="kt-badge kt-badge-{{ $badgeSize }} text-accent-foreground/60">
          {{ $badge }}
        </span>
      </span>
    @endif
  </{{ $tag }}>
</div>