'use client';

import type { ReactNode } from 'react';
import { SidebarProvider, useSidebar } from './sidebar-context';
import { Sidebar } from './sidebar';
import { Topbar } from './topbar';

interface AppShellProps {
  children: ReactNode;
}

function AppShellFrame({ children }: AppShellProps): React.ReactElement {
  const { collapsed, isMobile } = useSidebar();

  return (
    <div className="app-shell" data-sidebar-hidden={!isMobile && collapsed ? 'true' : undefined}>
      <Topbar />
      <Sidebar />
      <div className="app-main">
        <main className="h-full overflow-y-auto p-6">{children}</main>
      </div>
    </div>
  );
}

export function AppShell({ children }: AppShellProps): React.ReactElement {
  return (
    <SidebarProvider>
      <AppShellFrame>{children}</AppShellFrame>
    </SidebarProvider>
  );
}