{{--
    Nav Item Component
    This component renders a navigation item with consistent styling in different navigation areas:
    - Sidebar navigation
    - Mobile bottom navigation
    
    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
    - hideOnMobile: Boolean indicating if this item should be hidden on mobile view (for sidebar)
    - tooltip: Tooltip text to show on hover (for sidebar)
    - modal: ID of modal to toggle when clicked (optional)
    - badge: Badge content to display on the icon (optional)
--}}

@props([
    'icon',
    'label',
    'route' => '#',
    'active' => false,
    'hideOnMobile' => false,
    'tooltip' => null,
    'modal' => null,
    'badge' => null,
    'badgeClass' => 'bg-danger',
])

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

// CSS classes based on props
$itemClasses = 'nav-item ' . ($active ? 'active ' : '') . ($hideOnMobile ? 'hide-on-mobile ' : '');
@endphp

<li class="{{ $itemClasses }}"
    @if ($tooltip) data-toggle="tooltip" data-placemen="right" title="{{ $tooltip }}" @endif>

    <a class="nav-link {{ $modal ? 'notifications' : '' }}" href="{{ $routeUrl }}"
        @if ($modal) data-toggle="modal" data-target="#{{ $modal }}" @endif>

        <span class="position-relative d-inline-flex">
            @svg('lucide-' . $icon, ['width' => '20', 'height' => '20'])
            @if ($badge)
                <span class="badge {{ $badgeClass }} notification-badge">{{ $badge }}</span>
            @endif
        </span>

        <span class="nav-link-text">
            {{ $label }}
        </span>
    </a>
</li>

<style>
    .notification-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        font-size: 0.65rem;
        padding: 0.2em 0.4em;
        border-radius: 50%;
        min-width: 16px;
        height: 16px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .side-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        font-size: 0.65rem;
        padding: 0.2em 0.4em;
        border-radius: 50%;
        min-width: 16px;
        height: 16px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>