import { MagnifyingGlassIcon, UserIcon } from "@heroicons/react/24/outline";
import { Link, NavLink } from "react-router-dom";
import { memo } from "react";
import { SearchBar } from "./SearchBar";
import { Logo } from "./Logo";
import Navigation from "./navigation";
import { UserMenu} from "./usermenu";
import { useAuth } from "@web/src/providers/auth-provider";
interface HeaderProps {
    onSearch?: (query: string) => void;
}
export const Header = memo(function Header({ onSearch }: HeaderProps) {
    const { isAuthenticated } = useAuth()
    return (
        <header className="sticky top-0 z-50 bg-[#13294B] text-white shadow-lg">
            <div className="container mx-auto px-4">
                <div className="py-3">
                    <div className="flex items-center justify-between gap-4">
                        <Logo />
                        <div className="flex-grow max-w-2xl">
                            <SearchBar onSearch={onSearch} />
                        </div>
                        <div className="flex items-center gap-6">

                            {
                                !isAuthenticated ? <Link
                                    to="/auth"
                                    className="group flex items-center gap-2 rounded-lg 
bg-[#00539B]/90 px-5 py-2.5 font-medium
shadow-lg transition-all duration-300 
hover:-translate-y-0.5 hover:bg-[#0063B8] 
hover:shadow-xl hover:shadow-[#00539B]/30
focus:outline-none focus:ring-2 
focus:ring-[#8EADD4] focus:ring-offset-2
focus:ring-offset-[#13294B]"
                                    aria-label="Login"
                                >
                                    <UserIcon className="h-5 w-5 transition-transform 
    group-hover:scale-110 group-hover:rotate-12" />
                                    <span>Login</span>
                                </Link> : <UserMenu />


                            }
                        </div>
                    </div>
                </div>
                <Navigation />
            </div>
        </header>
    );
});