import Notifications from "./Notifications"; // Notification componentini import ediyoruz
import UserInfo from "./UserInfo";
import { Link } from "react-router-dom";
import SearchBar from "../Navbar/SearchBar";
import { useHideOnScroll } from "../../../hooks/useHideOnScroll";

type NavbarProps = {
  onToggleCategories: () => void;
};

export default function Navbar({ onToggleCategories }: NavbarProps) {
  console.log("NAVBAR received prop:", onToggleCategories);
  const visible = useHideOnScroll({
    topThreshold: 12,
    hideAfterDownPx: 12,
    revealAfterUpPx: 150,
  });

  return (
    <header
      className={[
        "fixed top-0 left-0 right-0 z-50",
        "transition-transform duration-200 will-change-transform",
        visible ? "translate-y-0" : "-translate-y-full",
      ].join(" ")}
    >
      <nav className="bg-surface border-b border-border">
        <div className="max-w-[1400px] mx-auto px-4 py-7 flex justify-between items-center">
          {/* Sol: logo + menü */}
          <div className="flex items-center gap-10">
            <Link to="/" className="text-primary font-bold text-3xl">
              DealHeat
            </Link>

            <ul className="flex gap-6 text-text items-center">
              {/* KATEGORİLER */}
              <li>
                <button
                  type="button"
                  onClick={() => {
                    console.log("toggle categories");
                    onToggleCategories();
                  }}
                  className="hover:text-primary text-grey transition-colors font-semibold cursor-pointer"
                >
                  Kategoriler
                </button>
              </li>
            </ul>
          </div>

          {/* Orta: arama */}
          <div className="flex-1 flex justify-center px-6">
            <SearchBar />
          </div>

          {/* Sağ: notification + kullanıcı + buton */}
          <div className="flex items-center gap-10">
            {/* Notification Icon */}
            <Notifications />

            {/* User Info Component */}
            <UserInfo />

            <Link
              to="/create-deal"
              className="bg-primary hover:bg-primary-hover text-white font-semibold px-4 py-2 rounded-md transition"
            >
              Fırsat Yolla
            </Link>
          </div>
        </div>
      </nav>
    </header>
  );
}
