'use client'; import { useState, useEffect, useRef } from 'react'; import Link from 'next/link'; import Image from 'next/image'; import { useSession, signOut } from 'next-auth/react'; import { agentsService } from '@/services/agents.service'; import { usersService } from '@/services/users.service'; import { uploadService } from '@/services/upload.service'; const navLinks = [ { label: 'Education', href: '/education' }, { label: 'About Us', href: '/about' }, { label: "FAQ's", href: '/faq' }, ]; export function CommonHeader() { const { data: session } = useSession(); const [showProfileMenu, setShowProfileMenu] = useState(false); const profileMenuRef = useRef(null); const [profileImage, setProfileImage] = useState(null); // Close dropdown when clicking outside useEffect(() => { function handleClickOutside(event: MouseEvent) { if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) { setShowProfileMenu(false); } } if (showProfileMenu) { document.addEventListener('mousedown', handleClickOutside); } return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [showProfileMenu]); // Fetch profile image from backend based on user role useEffect(() => { const fetchProfileImage = async () => { try { const role = (session?.user as any)?.role; let avatar: string | null = null; if (role === 'AGENT') { const profile = await agentsService.getMyProfile(); avatar = profile.avatar; } else if (role === 'USER') { const profile = await usersService.getMyProfile(); avatar = profile.avatar; } if (avatar) { try { const avatarUrl = await uploadService.getPresignedDownloadUrl(avatar); setProfileImage(avatarUrl); } catch { setProfileImage(avatar); } } } catch (err) { console.error('Failed to fetch profile image:', err); } }; if (session) { fetchProfileImage(); } }, [session]); const userName = session?.user?.name; const userEmail = session?.user?.email; const userRole = (session?.user as any)?.role; // Use fetched profile image, fallback to session image const userImage = profileImage || session?.user?.image; // Determine dashboard link based on user role const dashboardLink = userRole === 'AGENT' ? '/agent/dashboard' : '/user/dashboard'; return (

{/* Logo */}