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

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.
 * Uses UI primitives to comply with architectural constraints.
 */
export function DashboardShell({ children, rail, controlBar }: DashboardShellProps) {
  return (
    <Box display="flex" h="screen" overflow="hidden" bg="base-black" color="white">
      {rail && (
        <Box as="aside" w="16" flexShrink={0} borderRight bg="surface-charcoal" borderColor="var(--color-outline)">
          {rail}
        </Box>
      )}
      <Box display="flex" flexGrow={1} flexDirection="col" overflow="hidden">
        {controlBar && (
          <Box as="header" h="14" borderBottom bg="surface-charcoal" borderColor="var(--color-outline)">
            {controlBar}
          </Box>
        )}
        <Box as="main" flexGrow={1} overflow="auto" p={6}>
          <Box maxWidth="7xl" mx="auto" display="flex" flexDirection="col" gap={6}>
            {children}
          </Box>
        </Box>
      </Box>
    </Box>
  );
}