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

export interface ControlBarProps {
  children: ReactNode;
  leftContent?: ReactNode;
  variant?: 'default' | 'dark';
}

export const ControlBar = ({ 
  children, 
  leftContent,
  variant = 'default'
}: ControlBarProps) => {
  return (
    <Surface 
      variant={variant === 'dark' ? 'dark' : 'muted'} 
      padding={4} 
      style={{ borderBottom: '1px solid var(--ui-color-border-default)' }}
    >
      <Box display="flex" alignItems="center" justifyContent="between" flexWrap="wrap" gap={4}>
        {leftContent && (
          <Box display="flex" alignItems="center" gap={4} flex={1}>
            {leftContent}
          </Box>
        )}
        <Box display="flex" alignItems="center" gap={4} justifyContent="end" flex={leftContent ? 0 : 1}>
          {children}
        </Box>
      </Box>
    </Surface>
  );
};