@props([
    'brand' => null,
    'logo' => null,
    'brandUrl' => '/',
    'items' => [],
    'containerClass' => 'container max-w-7xl mx-auto px-4 py-3 min-h-[81px]',
    'logoClass' => 'max-h-[60px] object-contain',
    'languageSwitch' => true,
    'languageOptions' => [
        ['code' => 'th', 'name' => 'TH', 'icon' => 'frontend:img/icon/th.svg'],
        ['code' => 'en', 'name' => 'EN', 'icon' => 'frontend:img/icon/en.svg']
    ],
    'currentLang' => 'th',
])

<nav class="bg-white sticky top-0 z-50 min-h-[81px]" id="header">
    <div class="{{ $containerClass }}">
        <div class="flex justify-between items-center">
            {{-- Logo Section with fixed width --}}
            <div class="flex items-center justify-center w-[180px]">
                <a href="{{ $brandUrl }}" class="group relative transition-all duration-300">
                    @if($logo)
                        <img src="{{ $logo }}" class="{{ $logoClass }}" onerror="this.style.display='none'">
                    @else
                        <span class="text-xl font-semibold">{{ $brand }}</span>
                    @endif
                </a>
            </div>

            {{-- Mobile Actions --}}
            <div class="flex items-center lg:hidden">
                @if($languageSwitch)
                    <x-frontend::navigations.language-switcher 
                        :options="$languageOptions" 
                        :current="$currentLang" 
                    />
                @endif

                <button type="button"
                    class="lg:hidden inline-flex items-center justify-center p-2 rounded-md text-primary hover:text-secondary transition-colors duration-300 font-medium"
                    data-collapse="#mobile-menu">
                    <span class="icon-[tabler--menu-2] collapse-open:hidden size-6"></span>
                    <span class="icon-[tabler--x] collapse-open:block hidden size-6"></span>
                </button>
            </div>

            {{-- Desktop Menu --}}
            <div class="hidden lg:flex flex-1 items-center justify-center gap-12 uppercase">
                @foreach($items as $item)
                    <a href="{{ $item['url'] ?? '#' }}" 
                       class="text-primary hover:text-secondary transition-colors duration-300 font-medium uppercase">
                        {{ $item['text'] }}
                    </a>
                @endforeach
                {{ $slot ?? '' }}
            </div>

            {{-- Desktop Language Switcher with fixed width to match logo section --}}
            @if($languageSwitch)
                <div class="hidden lg:block w-[180px] text-right">
                    <x-frontend::navigations.language-switcher 
                        :options="$languageOptions" 
                        :current="$currentLang" 
                    />
                </div>
            @endif
        </div>
    </div>

    {{-- Mobile Menu --}}
    <div id="mobile-menu" class="absolute top-[76px] left-0 w-full bg-white shadow-sm overflow-hidden max-h-0 transition-all duration-300 ease-in-out lg:hidden">
        <div class="px-4 pt-2 pb-3 space-y-1">
            @foreach($items as $item)
                <a href="{{ $item['url'] ?? '#' }}" 
                   class="block px-3 py-2 text-primary hover:text-secondary transition-colors duration-300 font-medium uppercase">
                    {{ $item['text'] }}
                </a>
            @endforeach
            {{ $slot ?? '' }}
        </div>
    </div>
</nav>

<script>
    function toggleMobileMenu() {
        const menu = document.getElementById("mobile-menu");
        if (menu.classList.contains("max-h-0")) {
            menu.classList.remove("max-h-0");
            menu.classList.add("max-h-[500px]");
        } else {
            menu.classList.add("max-h-0");
            menu.classList.remove("max-h-[500px]");
        }
    }

    // Add event listener to the mobile menu button
    document.addEventListener('DOMContentLoaded', () => {
        const mobileMenuBtn = document.querySelector('[data-collapse="#mobile-menu"]');
        if (mobileMenuBtn) {
            mobileMenuBtn.addEventListener('click', toggleMobileMenu);
        }
    });
</script>