import React from 'react';
import { ToolbarButton } from './ToolbarButton';

export function Toolbar({ 
  leftSection = [], 
  centerSection = [], 
  rightSection = [],
  className = ''
}) {
  const renderSection = (items) => (
    <div className="flex items-center gap-2">
      {items.map((item, index) => (
        <ToolbarButton key={index} {...item} />
      ))}
    </div>
  );

  return (
    <div className={`bg-gray-800 shadow-sm border-b border-gray-700 ${className}`}>
      <div className="container mx-auto px-4">
        <div className="h-14 flex items-center justify-between">
          {renderSection(leftSection)}
          {renderSection(centerSection)}
          {renderSection(rightSection)}
        </div>
      </div>
    </div>
  );
}