import { Link, NavLink, useNavigate } from "react-router-dom";
import { memo } from "react";
import { SearchBar } from "./SearchBar";
import Navigation from "./navigation";
import { useAuth } from "@web/src/providers/auth-provider";
import { UserOutlined } from "@ant-design/icons";
import { UserMenu } from "../element/usermenu/usermenu";
import logo from "@web/src/assets/logo.png"
import { env } from "@web/src/env";
export const Header = memo(function Header() {
	const { isAuthenticated } = useAuth();
	return (
		<header className="sticky top-0 z-50 bg-gradient-to-br from-primary-500 to-primary-800 text-white shadow-lg">
			<div className="mx-auto px-4">
				<div className="py-2 relative">  {/* 添加relative定位上下文 */}
					<div className="flex items-center justify-between gap-4">
						{/* 左侧logo部分 */}
						<div className="flex items-center flex-shrink-0">  {/* 防止压缩 */}
							<img className="w-24" src={logo} alt="logo" />
							<div>
								<span className="text-xl font-bold">  {env.APP_NAME || '信箱'}</span>
								<p className="text-sm text-secondary-50">
									聆怀若水，应语如风；纾难化困，践诺成春
								</p>
							</div>
						</div>

						{/* 右侧登录部分 */}
						<div className="flex items-center flex-shrink-0">  {/* 防止压缩 */}
							{!isAuthenticated ? (
								<Link to="/auth" className="...">
									<UserOutlined className="..." />
									<span>登录</span>
								</Link>
							) : (
								<UserMenu />
							)}
						</div>

						{/* 独立定位的搜索栏 */}
						<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl px-4">
							<SearchBar />
						</div>
					</div>
				</div>
				<Navigation />
			</div>
		</header>
	);
});