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

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

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

export default Header;