interstellar_ai/app/components/Header.tsx

// Header.tsx
import React, { useState } 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 }) => {
  const [menuOpen, setMenuOpen] = useState(false)
  
  const toggleMenu = () => {
    setMenuOpen(!menuOpen)
  }

  const buttonClicked = (page: "AI" | "Documentation" | "FAQ") => {
    onViewChange(page)
    toggleMenu()
  }

  return (
    <>
      <header>
        <div className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <nav className={`nav-links ${menuOpen ? "active":""}`}>
            <button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
            <button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
            {showToggle && showHistoryModelsToggle && (
              <button onClick={toggleDivs} className="nav-btn">
                {showDivs ? 'Hide History/Models' : 'Show History/Models'}
              </button>
            )}
          </nav>
        <button onClick={() => onViewChange('AI')} className="header-button header-logo">
          <p>1</p>
        </button>
        <div className="login-button">
          <Login /> 
        </div>
      </header>
    </>
  );
};

export default Header;