edr-platform/apps/edr-passenger-web/portal/src/components/AppHeader.tsx

'use client';

import { Train, LogOut, User, BookOpen, LogIn } from 'lucide-react';
import ThemeToggle from './ThemeToggle';
import Link from 'next/link';
import { useAuthStore } from '@/lib/auth-store';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function AppHeader() {
  const { user, isAuthenticated, initialize } = useAuthStore();
  const router = useRouter();

  useEffect(() => {
    initialize();
  }, [initialize]);
  return (
    <header className="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm">
      <div className="container mx-auto px-4">
        <div className="max-w-5xl mx-auto">
          <div className="flex items-center justify-between h-16">
          {/* Logo and Brand */}
          <Link href="/booking/search" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
              <Train className="w-6 h-6 text-white" />
            </div>
            <div>
              <h1 className="text-lg font-bold text-gray-900 dark:text-gray-100">
                Ethio-Djibouti Railway
              </h1>
              <p className="text-xs text-gray-600 dark:text-gray-400">
                Book train tickets across East Africa
              </p>
            </div>
          </Link>

          {/* Right side actions */}
          <div className="flex items-center gap-2">
            {!isAuthenticated ? (
              <Link
                href="/login"
                className="p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
                title="Sign In"
              >
                <LogIn className="w-5 h-5" />
              </Link>
            ) : (
              <Link
                href="/profile"
                className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
                title="Profile"
              >
                <User className="w-4 h-4 text-gray-600 dark:text-gray-400" />
                <span className="text-sm font-medium text-gray-700 dark:text-gray-300 hidden sm:inline">
                  {user?.fullName}
                </span>
              </Link>
            )}            
            <ThemeToggle />
            <Link
              href="/guide"
              className="p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
              title="How to Book"
            >
              <BookOpen className="w-5 h-5" />
            </Link>
          </div>
          </div>
        </div>
      </div>
    </header>
  );
}