import UserInfo from "./UserInfo"
import { Link } from "react-router-dom"
import SearchBar from "../Navbar/SearchBar"
import ThemeToggle from "./ThemeToggle"
import { useHideOnScroll } from "../../../hooks/useHideOnScroll"

export default function Navbar() {
const visible = useHideOnScroll({
  topThreshold: 12,
  hideAfterDownPx: 12,
  revealAfterUpPx: 150, // artır: daha geç gelsin
})
  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="mx-auto flex justify-between items-center px-6 py-3">
          {/* Sol: logo + menü */}
          <div className="flex items-center gap-10">
            <Link to="/" className="text-primary font-bold text-xl">
              DealHeat
            </Link>

            <ul className="flex gap-6 text-text items-center">
              <li>
                <Link
                  to="/"
                  className="hover:text-primary transition-colors font-semibold"
                >
                  Anasayfa
                </Link>
              </li>
              <li>
                <Link
                  to="/deals"
                  className="hover:text-primary transition-colors font-semibold"
                >
                  Fırsatlar
                </Link>
              </li>
              <li>
                <Link
                  to="/contact"
                  className="hover:text-primary transition-colors font-semibold"
                >
                  İletişim
                </Link>
              </li>
            </ul>
          </div>

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

          {/* Sağ: toggle + kullanıcı + buton */}
          <div className="flex items-center gap-4">
            <ThemeToggle />
            <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>
  )
}
