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

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

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