@props([
    'sidebar' => null,
    'sidebarPosition' => 'right', // left or right
])

<div class="container mx-auto px-4 py-8">
    @if ($sidebar)
        <div class="grid lg:grid-cols-12 gap-8">
            @if ($sidebarPosition === 'left')
                <!-- Sidebar Left -->
                <aside class="lg:col-span-4">
                    {{ $sidebar }}
                </aside>

                <!-- Main Content -->
                <main class="lg:col-span-8">
                    {{ $slot }}
                </main>
            @else
                <!-- Main Content -->
                <main class="lg:col-span-8">
                    {{ $slot }}
                </main>

                <!-- Sidebar Right -->
                <aside class="lg:col-span-4">
                    {{ $sidebar }}
                </aside>
            @endif
        </div>
    @else
        <!-- Full Width Content -->
        <main class="max-w-4xl mx-auto">
            {{ $slot }}
        </main>
    @endif
</div>