import React from 'react';
import { Sun, Moon } from 'lucide-react';
import SettingsMenu from './SettingsMenu';

/**
 * Slim branded header for the Decidron simulator.
 */
export default function Header({ theme, onToggleTheme, settings, onSettingsChange }) {
  return (
    <header className="app-header">
      <div className="header-left">
        <a href="https://www.neon.ai/" target="_blank" rel="noopener noreferrer" className="header-brand-link">
          <img src="/neon-logo.png" alt="Neon.ai" className="app-logo" />
        </a>
        <h1 className="app-title">
          <a href="https://www.neon.ai/" target="_blank" rel="noopener noreferrer" className="app-title-link">
            Neon.ai
          </a> - Decidron Network Simulator
        </h1>
      </div>
      <div className="header-right">
        <SettingsMenu settings={settings} onChange={onSettingsChange} />
        <button
          type="button"
          className="btn-sm btn-outline icon-btn"
          onClick={onToggleTheme}
          title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
        >
          {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
        </button>
      </div>
    </header>
  );
}