"use client";
import React, { useEffect, useState } from "react";

import { menu, close } from "src/assets";
import { styles } from "src/style";
import { navLinks } from "src/constans";
import Link from "next/link";
import logo2 from "../../src/assets/logo2.png";
import Image from "next/image";

const Navbar = () => {
  const [active, setActive] = useState("");
  const [toggle, setToggle] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.scrollY;
      if (scrollTop > 100) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };

    window.addEventListener("scroll", handleScroll);

    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <nav
      className={`sm:px-16 px-6 w-full flex items-center py-5 fixed top-0 z-20 tr03 ${
        scrolled ? "bg-black" : "bg-transparent"
      }`}
    >
      <div className="w-full flex justify-between items-center max-w-7xl mx-auto">
        <div className="flex">
          <Link
            href="/"
            className="flex items-center gap-2"
            onClick={() => {
              setActive("");
              window.scrollTo(0, 0);
            }}
          >
            <Image
              src={logo2}
              alt="ldsdogo"
              className="w-[120px] object-contain "
            />{" "}
          </Link>
          <ul className="list-none hidden sm:flex flex-row gap-10 p-3 mx-10">
            {navLinks.map((nav) => (
              <li
                key={nav.id}
                className={`${
                  active === nav.title ? "text-white" : "text-white"
                } hover:text-gray-400 text-[19px] font-medium cursor-pointer tr03`}
                onClick={() => setActive(nav.title)}
              >
                <>
                  {nav.go ? (
                    <Link href={`/${nav.id}`}>{nav.title}</Link>
                  ) : (
                    <a href={`/#${nav.id}`}>{nav.title}</a>
                  )}
                </>
              </li>
            ))}
          </ul>
        </div>

        <div className="flex">
          <Link href="/app/login">
            <button className=" btn btn-primary  px-10 rounded-full  py-2 xs:hidden lg:block">
              Get started
            </button>
          </Link>
        </div>

        <div className="sm:hidden flex flex-1 justify-end items-center">
          <Image
            src={toggle ? close : menu}
            alt="menu"
            className="w-[18px] h-[28px] object-contain"
            onClick={() => setToggle(!toggle)}
          />

          <div
            className={`${
              !toggle ? "hidden" : "flex"
            } p-6 bg-white absolute top-20 right-5 my-2 min-w-[140px] z-10 rounded-xl`}
          >
            <ul className="list-none flex justify-end items-start flex-1 flex-col gap-4">
              {navLinks.map((nav) => (
                <li
                  key={nav.id}
                  className={`font-poppins font-medium cursor-pointer text-[16px] ${
                    active === nav.title ? "text-white" : "text-secondary"
                  }`}
                  onClick={() => {
                    setToggle(!toggle);
                    setActive(nav.title);
                  }}
                >
                  <>
                    {nav.go ? (
                      <Link href={`/${nav.id}`}>{nav.title}</Link>
                    ) : (
                      <a href={`/#${nav.id}`}>{nav.title}</a>
                    )}
                  </>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;