interstellar_ai/app/components/Header.tsx

import React, { useState } from 'react';
import Login from './Login';

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

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" | "Credits") => { // Add 'Credits' to the options here
    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("AI")} className="nav-btn">Chat</button>
          <button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
          <button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
          <button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button> {/* Add Credits tab */}
          {showToggle && showHistoryModelsToggle && (
            <button onClick={toggleDivs} className="nav-btn">
              {showDivs ? 'Hide History/Models' : 'Show History/Models'}
            </button>
          )}
        </nav>
        <div className="header-button header-logo">
          {/* AI logo or text */}
        </div>
        <div className="login-button">
          <Login /> 
        </div>
      </header>
    </>
  );
};

export default Header;