@props([
    'sticky' => false,
    'fixed' => false,
    'transparent' => false,
])

@php
    $baseClass = 'fluent-header';

    $modeClass = collect([
        $sticky ? 'is-sticky' : '',
        $fixed ? 'is-fixed' : '',
        $transparent ? 'is-transparent' : '',
    ])->implode(' ');
@endphp

<div 
    {{ $attributes->merge([
        'class' => "$baseClass $modeClass" 
    ]) }}
    data-fluent-header
>
    <div class="fluent-header__container container d-flex align-center justify-between">

        {{-- LEFT AREA --}}
        <div class="fluent-header__left d-flex align-center gap-lg">

            {{-- MOBILE TOGGLE --}}
            <button 
                type="button"
                class="fluent-header__toggle d-md-none"
                data-fluent-header-toggle 
                aria-label="Toggle navigation"
            >
                <x-fluent-icon name="navigation" />
            </button>

            {{-- LOGO SLOT --}}
            {{ $logo ?? '' }}

            {{-- DESKTOP NAV --}}
            @if(isset($menu))
                <nav class="fluent-header__nav d-none d-md-flex">
                    {{ $menu }}
                </nav>
            @endif

        </div>

        {{-- RIGHT AREA --}}
        @if(isset($right))
            <div class="fluent-header__right d-flex align-center gap-md">
                {{ $right }}
            </div>
        @endif

    </div>

    {{-- MOBILE NAV --}}
    @if(isset($menu))
        <div class="fluent-header__mobile d-md-none" data-fluent-header-menu>
            <div class="container">
                {{ $menu }}
            </div>
        </div>
    @endif
</div>

<div class="fluent-header__overlay" data-fluent-header-overlay></div>