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";
interface HeaderProps {
    onSearch?: (query: string) => void;
}
export const Header = memo(function Header({ onSearch }: HeaderProps) {
    return (
        <header className="sticky top-0 z-50 bg-[#13294B] text-white shadow-lg">
            <div className="container mx-auto px-4">
                <div className="py-4">
                    <div className="flex items-center justify-between">
                        <Logo />
                        <SearchBar onSearch={onSearch} />
                        <div className="flex items-center space-x-6">
                            <Link
                                to="/login"
                                className="group flex items-center space-x-2 rounded-lg bg-[#00539B] px-5 
                           py-2.5 shadow-lg transition-all duration-300 
                           hover:-translate-y-0.5 hover:bg-[#0063B8] 
                           hover:shadow-[#00539B]/50 focus:outline-none 
                           focus:ring-2 focus:ring-[#8EADD4] focus:ring-offset-2"
                                aria-label="Login"
                            >
                                <UserIcon className="h-5 w-5 transition-transform group-hover:scale-110" />
                                <span className="font-medium">Login</span>
                            </Link>
                        </div>
                    </div>
                </div>
                <Navigation></Navigation>
            </div>
        </header>
    );
});