<script context="module" lang="ts">
  import type { SidebarState } from '$lib/types/layout';

  export function getContentOffsetClass(state: SidebarState): string {
    if (state === 'expanded') return 'md:ml-60';
    if (state === 'collapsed') return 'md:ml-16';
    return 'md:ml-0';
  }
</script>

<script lang="ts">
  import { sidebarState } from '$lib/stores/layout';
  import Sidebar from './Sidebar.svelte';
  import TopBar from './TopBar.svelte';

  $: contentOffsetClass = getContentOffsetClass($sidebarState);
</script>

<div class="min-h-screen bg-base-200" data-testid="app-layout">
  <Sidebar />

  <div class={`flex min-h-screen flex-col transition-all duration-200 ${contentOffsetClass}`} data-testid="layout-main">
    <TopBar />
    <main class="flex-1 p-4 md:p-6 overflow-auto" data-testid="layout-content">
      <slot />
    </main>
  </div>
</div>
