@props([
    'tabs' => [], // ['id' => 'Label']
    'active' => array_key_first($tabs)
])

<div class="fluent-layout" data-fluent-tabs>

    {{-- HEADER --}}
    <div class="fluent-tabs">
        <div class="fluent-tab-indicator"></div>

        <div class="fluent-tabs-scroll">
            @foreach($tabs as $id => $label)
                <x-fluent-button
                    type="button"
                    variant="subtle"
                    class="fluent-tab {{ $active === $id ? 'active' : '' }}"
                    data-tab="{{ $id }}"
                >
                    {{ $label }}
                </x-fluent-button>
            @endforeach
        </div>

        {{-- MOBILE MORE --}}
        <div class="fluent-tab-more">
            <x-fluent-button
                type="button"
                variant="subtle"
                class="fluent-tab-more-btn"
                aria-label="More tabs"
                icon="more_horizontal"
            />
            <div class="fluent-tab-dropdown"></div>
        </div>
    </div>

    {{-- CONTENT --}}
    <div class="fluent-content">
        {{ $slot }}
    </div>

    {{-- FOOTER --}}
    @if(isset($footer))
        <div class="fluent-footer p-md border-top-subtle d-flex justify-end">
            {{ $footer }}
        </div>
    @endif

</div>