flyer-crawler.projectium.com/src/components/Header.tsx

// src/components/Header.tsx
import React from 'react';
import { ShoppingCartIcon } from './icons/ShoppingCartIcon';
import { UserIcon } from './icons/UserIcon';
import { Cog8ToothIcon } from './icons/Cog8ToothIcon';
import { MicrophoneIcon } from './icons/MicrophoneIcon';
import { Link } from 'react-router-dom';
import { ShieldCheckIcon } from './icons/ShieldCheckIcon';
import type { UserProfile } from '../types';
import type { AuthStatus } from '../hooks/useAuth';

export interface HeaderProps {
  isDarkMode: boolean;
  unitSystem: 'metric' | 'imperial';
  authStatus: AuthStatus;
  userProfile: UserProfile | null;
  onOpenProfile: () => void;
  onOpenVoiceAssistant: () => void;
  onSignOut: () => void;
}

export const Header: React.FC<HeaderProps> = ({
  isDarkMode,
  unitSystem,
  authStatus,
  userProfile,
  onOpenProfile,
  onOpenVoiceAssistant,
  onSignOut,
}) => {
  // The state and handlers for the old AuthModal and SignUpModal have been removed.
  return (
    <>
      <header className="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-20">
        <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center">
              <ShoppingCartIcon className="h-8 w-8 text-brand-primary" />
              <h1 className="ml-3 text-2xl font-bold text-gray-800 dark:text-white">
                Flyer Crawler
              </h1>
            </div>
            <div className="flex items-center space-x-4 md:space-x-6">
              {userProfile && (
                <button
                  onClick={onOpenVoiceAssistant}
                  className="p-1.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700/50 text-gray-500 dark:text-gray-400 transition-colors"
                  aria-label="Open voice assistant"
                  title="Voice Assistant"
                >
                  <MicrophoneIcon className="w-5 h-5" />
                </button>
              )}
              {/* The toggles have been removed. The display of the current state is now shown textually. */}
              <div className="hidden sm:flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
                <span className="capitalize">{unitSystem}</span>
                <span>|</span>
                <span>{isDarkMode ? 'Dark' : 'Light'} Mode</span>
              </div>

              <div className="w-px h-6 bg-gray-200 dark:bg-gray-700 hidden sm:block"></div>
              {userProfile ? ( // This ternary was missing a 'null' or alternative rendering path for when 'user' is not present.
                <div className="flex items-center space-x-3">
                  <div className="hidden md:flex items-center space-x-2 text-sm">
                    <UserIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
                    {authStatus === 'AUTHENTICATED' ? (
                      // Use the user object from the new auth system
                      <span className="font-medium text-gray-700 dark:text-gray-300">
                        {userProfile.user.email}
                      </span>
                    ) : (
                      <span className="font-medium text-gray-500 dark:text-gray-400 italic">
                        Guest
                      </span>
                    )}
                  </div>
                  <button
                    onClick={onOpenProfile}
                    className="p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 text-gray-500 dark:text-gray-400 transition-colors"
                    aria-label="Open my account settings"
                    title="My Account"
                  >
                    <Cog8ToothIcon className="w-5 h-5" />
                  </button>
                  {userProfile?.role === 'admin' && (
                    <Link
                      to="/admin"
                      className="p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 text-gray-500 dark:text-gray-400 transition-colors"
                      title="Admin Area"
                    >
                      <ShieldCheckIcon className="w-5 h-5" />
                    </Link>
                  )}
                  <button
                    onClick={onSignOut}
                    className="text-sm font-semibold text-gray-600 hover:text-brand-primary dark:text-gray-300 dark:hover:text-brand-light transition-colors"
                  >
                    Logout
                  </button>
                </div>
              ) : (
                // When no user is logged in, show a Login button.
                <button
                  onClick={onOpenProfile}
                  className="text-sm font-semibold text-gray-600 hover:text-brand-primary dark:text-gray-300 dark:hover:text-brand-light transition-colors"
                >
                  Login
                </button>
              )}
            </div>
          </div>
        </div>
      </header>
    </>
  );
};