import { Box } from '@/ui/Box';
import { Header } from '@/ui/Header';
import { MainContent } from '@/ui/MainContent';
import { Sidebar } from '@/ui/Sidebar';
import React from 'react';

interface DashboardShellProps {
  children: React.ReactNode;
  rail?: React.ReactNode;
  controlBar?: React.ReactNode;
}

/**
 * DashboardShell
 * 
 * The primary layout container for the Telemetry Workspace.
 * Orchestrates the sidebar rail, top control bar, and main content area.
 */
export function DashboardShell({ children, rail, controlBar }: DashboardShellProps) {
  return (
    <Box
      display="flex"
      minHeight="100vh"
      style={{ backgroundColor: 'var(--ui-color-bg-base)' }}
    >
      {rail && <Sidebar>{rail}</Sidebar>}

      <Box display="flex" flexDirection="col" flex={1} minWidth="0">
        {controlBar && <Header>{controlBar}</Header>}
        <MainContent maxWidth="7xl">{children}</MainContent>
      </Box>
    </Box>
  );
}