<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
    <!-- Mobile Sidebar (Drawer) -->
    <div 
      v-if="isSidebarOpen" 
      class="fixed inset-0 bg-gray-900/50 z-40 lg:hidden" 
      @click="isSidebarOpen = false"
    />
    <AppSidebar 
      class="fixed top-0 bottom-0 z-50 transition-transform duration-300 ease-in-out" 
      :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
    />
    
    <!-- Right Content Area -->
    <div class="flex-1 lg:ml-64 flex flex-col">
      <!-- Fixed Header -->
      <AppHeader 
        class="fixed top-0 right-0 z-30 transition-all duration-300"
        :class="{ 'left-0': !isSidebarOpen, 'lg:left-64': true }"
        @toggle-sidebar="isSidebarOpen = !isSidebarOpen" 
      />
      
      <!-- Main Content -->
      <main class="flex-1 overflow-y-auto pt-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <slot />
        </div>
      </main>
      
      <!-- Footer -->
      <AppFooter />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isSidebarOpen = ref(false)
</script>