// 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)
  }

  return (
    <>
      <header>
        <div className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <nav className={`nav-links ${menuOpen ? "active":""}`}>
            <button onClick={() => onViewChange('FAQ')} className="nav-btn">FAQ</button>
            <button onClick={() => onViewChange('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">
            <img src="/img/logo.png" alt="logo" className="header-logo" />
          </button> */}
      <Login />
      </header>
    </>
  );
};

export default Header;