import { AppFooter } from '@/components/layout/AppFooter';
import { AppHeader } from '@/components/layout/AppHeader';
import { AppSidebar } from '@/components/layout/AppSidebar';
import { SidebarProvider } from '@/components/layout/SidebarContext';
import { ViewData } from '@/lib/contracts/view-data/ViewData';
import { Box } from '@/ui/Box';
import { Layout } from '@/ui/Layout';
import React from 'react';

export interface RootAppShellViewData extends ViewData {
  children: React.ReactNode;
}

/**
 * RootAppShellTemplate orchestrates the top-level semantic shells of the application.
 * Redesigned for the "Cockpit" layout.
 */
export function RootAppShellTemplate({ children }: RootAppShellViewData) {
  return (
    <SidebarProvider>
      <Layout
        header={<AppHeader />}
        sidebar={<AppSidebar />}
        footer={<AppFooter />}
        fixedHeader={true}
        fixedSidebar={true}
        fixedFooter={true}
      >
        <Box 
          width="full"
          className="max-w-[1920px] mx-auto"
          px={8}
          py={8}
        >
          {children}
        </Box>
      </Layout>
    </SidebarProvider>
  );
}