import React from 'react';
import { Menu } from 'lucide-react';
import useRenderTracker from '../../hooks/useRenderTracker';
import { useSetIsMobileSidebarOpen } from '../../contexts/UIContext';
import { useAuth } from '../../contexts/AuthContext';
import { useSetIsSettingsModalOpen } from '../../contexts/UIContext';
import ProfileLogo from '../Logos/ProfileLogo';
import { IS_WORDPRESS } from '../../constants';
import { useAppRoute } from '../../hooks/useAppRoute';
import WebNavigationLinks from './WebNavigationLinks';

const MobileHeader: React.FC = () => {
  const setIsMobileSidebarOpen = useSetIsMobileSidebarOpen();
  const setIsSettingsModalOpen = useSetIsSettingsModalOpen();
  const { isLoggedIn, userInfo } = useAuth();
  const { openSettingsRoute } = useAppRoute();

  useRenderTracker('MobileHeader', {
    isLoggedIn,
    userInfo,
    setIsSettingsModalOpen,
    setIsMobileSidebarOpen,
  });

  return (
    <>
      {/* Main header with menu and profile */}
      <nav className="flex h-12 items-center justify-between border-b border-app-border bg-app-bg px-2 py-5 sm:px-3 sm:py-7 md:hidden">
        {/* Left side - menu button */}
        <button
          type="button"
          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-app-muted transition-colors hover:bg-app-surface-hover hover:text-app-text"
          aria-label="Open menu"
          onClick={() => setIsMobileSidebarOpen(true)}
        >
          <Menu size={20} />
        </button>
        
        {/* Right side - navigation links and profile */}
        <div className="flex items-center space-x-4">
          {/* Navigation links */}
          {!IS_WORDPRESS && <WebNavigationLinks compact />}
          
          {/* Profile logo */}
          {isLoggedIn && userInfo ? (
            <ProfileLogo 
              name={userInfo.name} 
              email={userInfo.email} 
              onClick={() => {
                setIsSettingsModalOpen(true);
                openSettingsRoute('account');
              }}
              size={40}
              showLabel={false}
            />
          ) : (
            // Empty spacer to maintain layout
            <div className="w-10"></div>
          )}
        </div>
      </nav>
    </>
  );
};

export default React.memo(MobileHeader);