import { useState, useEffect, useRef } from 'react' import { motion } from 'framer-motion' import { Menu, X, ChevronDown } from 'lucide-react' import { t, type Language } from '../../i18n/translations' interface HeaderBarProps { onLoginClick?: () => void isLoggedIn?: boolean isHomePage?: boolean currentPage?: string language?: Language onLanguageChange?: (lang: Language) => void user?: { email: string } | null onLogout?: () => void isAdminMode?: boolean onPageChange?: (page: string) => void } export default function HeaderBar({ isLoggedIn = false, isHomePage = false, currentPage, language = 'zh' as Language, onLanguageChange, user, onLogout, isAdminMode = false, onPageChange }: HeaderBarProps) { const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [languageDropdownOpen, setLanguageDropdownOpen] = useState(false) const [userDropdownOpen, setUserDropdownOpen] = useState(false) const dropdownRef = useRef(null) const userDropdownRef = useRef(null) // Close dropdown when clicking outside useEffect(() => { function handleClickOutside(event: MouseEvent) { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { setLanguageDropdownOpen(false) } if (userDropdownRef.current && !userDropdownRef.current.contains(event.target as Node)) { setUserDropdownOpen(false) } } document.addEventListener('mousedown', handleClickOutside) return () => { document.removeEventListener('mousedown', handleClickOutside) } }, []) return ( ) }