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

export interface HeaderProps {
  children: ReactNode;
  actions?: ReactNode;
}

export const Header = ({ 
  children, 
  actions 
}: HeaderProps) => {
  return (
    <Box 
      as="header" 
      bg="var(--ui-color-bg-surface)" 
      borderBottom 
      paddingY={4} 
      position="sticky" 
      top={0} 
      zIndex={50}
    >
      <Container size="xl">
        <Box display="flex" alignItems="center" justifyContent="between">
          <Box display="flex" alignItems="center" gap={8}>
            {children}
          </Box>
          {actions && (
            <Box display="flex" alignItems="center" gap={4}>
              {actions}
            </Box>
          )}
        </Box>
      </Container>
    </Box>
  );
};