@props([
    'href' => null,
    'megaMenuId' => null,
    'isMega' => false,
])

@php
  $linkHref = $href ? route($href) : '#';
  // Si $href existe, usar patron con * para rutas hijas
  $isActive = $href ? request()->routeIs($href . '*') : false;
@endphp

@if ($isMega)
  {{-- Elemento con Mega Menú (Usa Alpine) --}}
  {{-- Aplicar el ID al li si se proporciona --}}
  <li {{ $attributes->merge(['class' => 'list-item-megamenu', 'id' => "list-item-$megaMenuId"]) }} x-data
    @mouseenter="$store.mega.show('{{ $megaMenuId }}')" @mouseleave="$store.mega.hide()">
    <a href="{{ $linkHref }}" {{ !$href ? 'rel="nofollow" onclick="return false;"' : '' }} class="link-menu border-b-4 border-transparent py-4 transition-colors{{ $isActive ? ' link-menu-route-active' : '' }}"
      :class="{ 'link-menu-active': $store.mega.isOpen('{{ $megaMenuId }}') }">
      {{ $slot }}
    </a>
    {{-- Mega menu dinámico basado en megaMenuId --}}
    <x-landing.mega-menu menuId="{{ $megaMenuId }}">
      <x-dynamic-component :component="'landing.menu.' . $megaMenuId" />
    </x-landing.mega-menu>
  </li>
@else
  {{-- Elemento de menú simple (Usa Blade @class) --}}
  {{-- Aplicar el ID al li si se proporciona (aunque no se use aquí para el cálculo) --}}
  <li {{ $attributes->merge([
      'class' => 'list-item-megamenu',
      'id' => "list-item-$megaMenuId"
  ]) }}>
    <a href="{{ $linkHref }}" @class([
        'link-menu border-b-4 border-transparent py-4 transition-colors',
        'link-menu-active' => $isActive,
    ])>
      {{ $slot }}
    </a>
  </li>
@endif