// src/pages/agent-office/components/TopBar.jsx
import { getThemeNames } from '../canvas/themes.js';

export default function TopBar({ connected, theme, onThemeChange, zoom, onZoomChange }) {
  const themes = getThemeNames();

  return (
    <div className="ao-topbar">
      <div className="ao-topbar-left">
        <span className="ao-topbar-title">Agent Office</span>
        <span className={`ao-topbar-status ${connected ? 'connected' : 'disconnected'}`}>
          ● {connected ? 'Connected' : 'Disconnected'}
        </span>
      </div>
      <div className="ao-topbar-right">
        <select
          className="ao-topbar-select"
          value={theme}
          onChange={(e) => onThemeChange(e.target.value)}
        >
          {themes.map(t => (
            <option key={t.key} value={t.key}>{t.name}</option>
          ))}
        </select>
        <div className="ao-topbar-zoom">
          <button onClick={() => onZoomChange(Math.max(1, zoom - 0.5))} disabled={zoom <= 1}>-</button>
          <span>{zoom}x</span>
          <button onClick={() => onZoomChange(Math.min(4, zoom + 0.5))} disabled={zoom >= 4}>+</button>
        </div>
      </div>
    </div>
  );
}