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

interface AppShellProps {
  children: React.ReactNode;
}

/**
 * AppShell is the root container for the entire application layout.
 * Provides the base structure with cockpit-inspired design.
 */
export function AppShell({ children }: AppShellProps) {
  return (
    <Box
      height="100vh"
      bg="var(--ui-color-bg-base)"
      color="var(--ui-color-text-high)"
      display="flex"
      flexDirection="col"
      overflowY="auto"
      overflowX="hidden"
      style={{
        fontFamily: 'var(--ui-font-sans)',
        background: 'linear-gradient(180deg, #0a0a0b 0%, #0f0f10 100%)',
      }}
    >
      {children}
    </Box>
  );
}