interstellar_ai/app/components/Header.tsx

// Header.tsx
import React from 'react';
import Login from './Login';

interface HeaderProps {
  onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void;
  showDivs: boolean;
  toggleDivs: () => void;
  showHistoryModelsToggle: boolean;
  showToggle: boolean; // Add this prop
}

const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
  return (
    <>
      <header>
        <ul>
          <li>
            <button onClick={() => onViewChange('AI')} className="header-button header-logo">
              <img src="/img/logo.png" alt="logo" className="header-logo" />
            </button>
          </li>
          <li>
            <button onClick={() => onViewChange('FAQ')} className="header-button">FAQ</button>
          </li>
          <li>
            <button onClick={() => onViewChange('Documentation')} className="header-button">Documentation</button>
          </li>
          {showToggle && showHistoryModelsToggle && (
            <li>
              <button onClick={toggleDivs} className="header-button">
                {showDivs ? 'Hide History/Models' : 'Show History/Models'}
              </button>
            </li>
          )}
        </ul>
      <Login />
      </header>
    </>
  );
};

export default Header;