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

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 (
    <Stack direction="row" h="screen" overflow="hidden" bg="base-black" color="white">
      {rail && (
        <Stack as="aside" w="16" flexShrink={0} borderRight bg="surface-charcoal" borderColor="var(--color-outline)">
          {rail}
        </Stack>
      )}
      <Stack flexGrow={1} overflow="hidden">
        {controlBar && (
          <Stack as="header" h="14" borderBottom bg="surface-charcoal" borderColor="var(--color-outline)">
            {controlBar}
          </Stack>
        )}
        <Stack as="main" flexGrow={1} overflow="auto" p={6}>
          <Stack maxWidth="7xl" mx="auto" gap={6} fullWidth>
            {children}
          </Stack>
        </Stack>
      </Stack>
    </Stack>
  );
}
