{{--
    Mobile Nav Item Component
    This component renders a mobile navigation item for the bottom navigation bar.
    
    Parameters:
    - icon: The Lucide icon name (e.g., 'gamepad-2') - rendered via @svg('lucide-' . $icon)
    - label: The link text to display
    - route: The route name or URL to link to (optional)
    - active: Boolean indicating if this item is active
    - toggle: Set to true if this item toggles the sidebar
--}}

@props(['icon', 'label', 'route' => '#', 'active' => false, 'toggle' => false])

@php
    // Parse the route if it's not already a URL and not a toggle
if (!$toggle && $route !== '#' && !str_starts_with($route, 'http')) {
        $routeUrl = route($route);
    } else {
        $routeUrl = $route;
    }
@endphp

<a href="{{ $routeUrl }}" class="nav-item {{ $active ? 'active' : '' }}"
    @if ($toggle) id="mobileSidebarToggle"
   data-target="#navbarResponsive"
   aria-controls="navbarResponsive"
   aria-expanded="true"
   aria-label="Toggle navigation"
   aria-toggle="collapse" @endif>
    @svg('lucide-' . $icon, ['width' => '20', 'height' => '20'])
    <span>{{ $label }}</span>
</a>