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";
import { Button } from "antd";
import usePublicImage from "@web/src/hooks/usePublicImage";
export const Header = memo(function Header() {
	const { isAuthenticated } = useAuth();
	const navigate = useNavigate();
	const { imageUrl } = usePublicImage("logo.png");
	return (
		<header className="sticky top-0 z-50 shadow-lg bg-slate-50">
			<div className="mx-auto px-4">
				<div className="py-1  relative">
					{" "}
					{/* 添加relative定位上下文 */}
					<div className="flex items-center justify-between gap-4">
						{/* 左侧logo部分 */}
						<div className="flex items-center flex-shrink-0">
							{" "}
							{/* 防止压缩 */}
							<div className="text-xl font-bold text-primary-500/80 whitespace-nowrap">
								{env.APP_NAME}
							</div>
						</div>
						{/* <SearchBar /> */}
						{/* 中间标题部分 */}
						{/* <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"></div> */}
						{/* 右侧登录部分 */}
						<div className="flex items-center flex-shrink-0">
							{" "}
							{/* 防止压缩 */}
							{!isAuthenticated ? (
								<Button
									className="  text-lg bg-primary-500/80 "
									style={{
										boxShadow: "none",
									}}
									onClick={() => {
										navigate("/auth");
									}}
									type="primary"
									icon={<UserOutlined></UserOutlined>}>
									登录
								</Button>
							) : (
								<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">
							
						</div> */}
					</div>
				</div>
				{/* <Navigation /> */}
			</div>
		</header>
	);
});