@props([
    'id',
    'title' => null,
    'position' => 'right', // right | left | top | bottom
    'size' => 'md', // sm | md | lg | full
])

<div 
    id="{{ $id }}"
    class="fluent-offcanvas fluent-offcanvas--{{ $position }} fluent-offcanvas--{{ $size }}"
    data-fluent-offcanvas
    aria-hidden="true"
>
    {{-- Overlay --}}
    <div class="fluent-offcanvas__overlay" data-offcanvas-close></div>

    {{-- Panel --}}
    <div class="fluent-offcanvas__panel">

        {{-- Header --}}
        @if($title)
            <div class="fluent-offcanvas__header">
                <span class="fluent-offcanvas__title">
                    {{ $title }}
                </span>

                <x-fluent-button 
                    icon="dismiss"
                    aria-label="Close"
                    variant="subtle"
                    data-offcanvas-close
                />
            </div>
        @endif

        {{-- Body --}}
        <div class="fluent-offcanvas__body">
            {{ $slot }}
        </div>

    </div>
</div>