import React from 'react';

interface ControlBarProps {
  children: React.ReactNode;
  className?: string;
}

/**
 * ControlBar is the top-level header of the "Telemetry Workspace".
 * It provides global controls, navigation, and status information.
 * Aligned with "Precision Racing Minimal" theme.
 */
export function ControlBar({ children, className = '' }: ControlBarProps) {
  return (
    <header 
      className={`sticky top-0 z-50 h-16 md:h-20 bg-[#0C0D0F]/80 backdrop-blur-md border-b border-[#23272B] flex items-center px-4 md:px-6 ${className}`}
    >
      {children}
    </header>
  );
}