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

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

export const ControlBar = ({ children, leftContent }: ControlBarProps) => {
  return (
    <Surface
      as="header"
      variant="precision"
      paddingX={0}
      height="56px"
      position="sticky"
      top="0"
      zIndex={100}
      borderBottom={true}
      backgroundColor="rgba(10, 10, 11, 0.92)"
      backdropBlur="xl"
      shadow="0 1px 0 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35)"
    >
      <Box display="flex" alignItems="center" justifyContent="between" h="full" width="full" px={4}>
        {leftContent && (
          <Box display="flex" alignItems="center" h="full" minWidth="0" flex={1}>
            {leftContent}
          </Box>
        )}
        <Box display="flex" alignItems="center" justifyContent="end" minWidth="0" flex={leftContent ? 0 : 1}>
          {children}
        </Box>
      </Box>
    </Surface>
  );
};