'use client';

import { AppFooter } from '@/components/layout/AppFooter';
import { AppHeader } from '@/components/layout/AppHeader';
import { AppSidebar } from '@/components/layout/AppSidebar';
import { Layout } from '@/ui/Layout';
import { Box } from '@/ui/Box';
import React from 'react';

export interface RootAppShellViewData {
  children: React.ReactNode;
}

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