import { MagnifyingGlassIcon, UserIcon } from "@heroicons/react/24/outline";
import { Link, NavLink } from "react-router-dom";
import { memo } from "react";
import { NAV_ITEMS } from "./constants";
import { SearchBar } from "./SearchBar";
import { Logo } from "./Logo";

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">
                {/* Main Content */}
                <div className="py-4">
                    <div className="flex items-center justify-between">
                        <Logo />
                        <SearchBar onSearch={onSearch} />

                        {/* User Actions */}
                        <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 */}
                <nav className="mt-4 rounded-lg bg-[#0B1A32]/90">
                    <div className="flex items-center justify-between px-6 py-1">
                        <div className="flex space-x-1">
                            {NAV_ITEMS.map((item) => (
                                <NavLink
                                    key={item.to}
                                    to={item.to}
                                    className={({ isActive }) => `
                    group relative px-4 py-3 rounded-md
                    transition-all duration-300 ease-out
                    outline-none 
                    ${isActive ? 'text-white font-medium' : 'text-[#8EADD4]'}
                  `}
                                >
                                    {({ isActive }) => (
                                        <>
                                            <span className="relative z-10 transition-colors group-hover:text-white">
                                                {item.label}
                                            </span>
                                            <span className={`
                        absolute inset-0 rounded-md bg-gradient-to-b 
                        from-white/10 to-transparent transition-opacity 
                        duration-300 ease-out opacity-0 group-hover:opacity-10
                        ${isActive ? 'opacity-5' : ''}
                      `} />
                                            <span className={`
                        absolute bottom-1.5 left-1/2 h-[2px] bg-white
                        transition-all duration-300 ease-out
                        transform -translate-x-1/2
                        ${isActive
                                                    ? 'w-12 opacity-100'
                                                    : 'w-0 opacity-0 group-hover:w-8 group-hover:opacity-50'
                                                }
                      `} />
                                        </>
                                    )}
                                </NavLink>
                            ))}
                        </div>
                    </div>
                </nav>
            </div>
        </header>
    );
});