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

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

export default Header;