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

export interface SidebarProps {
  children: ReactNode;
}

export const Sidebar = ({ children }: SidebarProps) => {
  return (
    <Box 
      as="aside" 
      display={{ base: 'none', lg: 'flex' }} 
      flexDirection="col" 
      width="16rem" 
      bg="var(--ui-color-bg-surface)" 
      style={{ borderRight: '1px solid var(--ui-color-border-default)', overflowY: 'auto' }}
    >
      {children}
    </Box>
  );
};