// ════════════════════════════════════════════════════════════════
// CommandBar — filter strip under header for active routes
// ════════════════════════════════════════════════════════════════

function CommandBar({ left, right, sticky = true }) {
  return (
    <div style={{
      position: sticky ? 'sticky' : 'static',
      top: sticky ? 'var(--header-h)' : 'auto',
      zIndex: 40,
      height: 'var(--commandbar-h)',
      background: 'var(--surface-sunken)',
      borderBottom: '1px solid var(--border-subtle)',
    }}>
      <div className="sdh-container" style={{
        height: '100%',
        display: 'flex', alignItems: 'center', gap: 'var(--space-4)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', flex: 1, minWidth: 0, flexWrap: 'wrap' }}>
          {left}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', flexShrink: 0 }}>
          {right}
        </div>
      </div>
    </div>
  );
}

window.CommandBar = CommandBar;