import { ReactNode } from 'react';
import { Box } from './Box';

export interface ContentShellProps {
  children: ReactNode;
  header?: ReactNode;
  sidebar?: ReactNode;
}

export const ContentShell = ({ 
  children, 
  header, 
  sidebar 
}: ContentShellProps) => {
  return (
    <Box display="flex" flexDirection="col" fullHeight>
      {header && (
        <Box borderBottom>
          {header}
        </Box>
      )}
      <Box display="flex" flex={1} minHeight="0">
        {sidebar && (
          <Box width="18rem" borderRight display={{ base: 'none', lg: 'block' }}>
            {sidebar}
          </Box>
        )}
        <Box flex={1} overflow="auto">
          {children}
        </Box>
      </Box>
    </Box>
  );
};