import React, { ReactNode } from 'react';
import { Box } from './primitives/Box';

export interface LayoutProps {
  children: ReactNode;
  header?: ReactNode;
  footer?: ReactNode;
  sidebar?: ReactNode;
}

export const Layout = ({ 
  children, 
  header, 
  footer, 
  sidebar 
}: LayoutProps) => {
  return (
    <Box display="flex" flexDirection="col" minHeight="100vh" bg="var(--ui-color-bg-base)">
      {header && (
        <Box as="header" position="sticky" top="0" zIndex={50}>
          {header}
        </Box>
      )}
      
      <Box display="flex" flex={1}>
        {sidebar && (
          <Box as="aside" width="16rem" display={{ base: 'none', lg: 'block' }}>
            {sidebar}
          </Box>
        )}
        
        <Box as="main" flex={1}>
          {children}
        </Box>
      </Box>
      
      {footer && (
        <Box as="footer">
          {footer}
        </Box>
      )}
    </Box>
  );
};