next-dj/components/Header.tsx

"use client";

import Link from "next/link";
import { useSession, signOut } from "next-auth/react";
import { useState, useEffect } from "react";

export default function Header() {
  const { data: session } = useSession();
  const [isSticky, setIsSticky] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  // Track open state for dropdowns by their ID or Label
  const [openDropdowns, setOpenDropdowns] = useState<Record<string, boolean>>({});

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 10) {
        setIsSticky(true);
      } else {
        setIsSticky(false);
      }
    };

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

  const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  const toggleDropdown = (key: string, e?: React.MouseEvent) => {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }
    setOpenDropdowns((prev) => ({
      ...prev,
      [key]: !prev[key],
    }));
  };

  return (
    <header
      className={`header-area style-two ${isSticky ? "sticky-on" : ""} ${isMobileMenuOpen ? "mobile-menu-open" : ""}`}
    >
      <div className="header-top">
        <div className="container h-100 d-flex align-items-center justify-content-between">
          {/* Left Side */}
          <div className="left-side d-flex align-items-center gap-4 gap-lg-5">
            <div className="d-flex align-items-center gap-2 text-white">
              <i className="ti ti-mail-filled"></i>
              <span className="d-none d-lg-block">info@example.com</span>
            </div>
            <div className="d-flex align-items-center gap-2 text-white">
              <i className="ti ti-map-pin-filled"></i>
              <span className="d-none d-lg-block">629 Elgin St.Celina,2202</span>
            </div>
            <div className="d-flex align-items-center gap-2 text-white">
              <i className="ti ti-phone"></i>
              <span className="d-none d-lg-block">(888).123.456.7894</span>
            </div>
          </div>

          {/* Right Side */}
          <div className="right-side">
            <div className="social-nav d-flex align-items-center gap-3">
              <a href="#"><i className="ti ti-brand-facebook"></i></a>
              <a href="#"><i className="ti ti-brand-x"></i></a>
              <a href="#"><i className="ti ti-brand-linkedin"></i></a>
              <a href="#"><i className="ti ti-brand-instagram"></i></a>
            </div>
          </div>
        </div>
      </div>

      <nav className="navbar navbar-expand-lg">
        <div className="container">
          {/* Navbar Brand */}
          <Link className="navbar-brand" href="/">
            <img src="/assets/img/core-img/logo.png" alt="" />
          </Link>

          {/* Navbar Toggler */}
          <button
            className="navbar-toggler"
            type="button"
            onClick={toggleMobileMenu}
            aria-label="Toggle navigation"
          >
            <i className="ti ti-category"></i>
          </button>

          {/* Navbar Nav */}
          <div className={`collapse navbar-collapse justify-content-between ${isMobileMenuOpen ? "show" : ""}`} id="softoraNav">
            <ul className="navbar-nav navbar-nav-scroll">
              <li className="softora-dd">
                <Link href="/">Home</Link>
              </li>

              {/* Features Dropdown Example based on Template */}
              <li className="softora-dd">
                <a href="#" onClick={(e) => toggleDropdown('features', e)}>
                  Features <i className="ti ti-caret-down-filled"></i>
                </a>
                {/* Mobile Toggler */}
                <div className="dropdown-toggler d-lg-none" onClick={(e) => toggleDropdown('features', e)}>
                  <i className="ti ti-caret-down-filled"></i>
                </div>

                <ul
                  className={`softora-dd-menu ${openDropdowns['features'] ? 'menu-open' : ''}`}
                >
                  <li><Link href="#services">Services</Link></li>
                  <li><Link href="/auth/register">Register</Link></li>
                  <li><Link href="/auth/login">Login</Link></li>
                  <li><Link href="/auth/forgot-password">Reset Password</Link></li>
                </ul>
              </li>
              <li className="softora-dd">
                <a href="#" onClick={(e) => toggleDropdown('utils', e)}>
                  Yardımcılar <i className="ti ti-caret-down-filled"></i>
                </a>
                {/* Mobile Toggler */}
                <div className="dropdown-toggler d-lg-none" onClick={(e) => toggleDropdown('utils', e)}>
                  <i className="ti ti-caret-down-filled"></i>
                </div>

                <ul
                    className={`softora-dd-menu ${openDropdowns['utils'] ? 'menu-open' : ''}`}
                >
                  <li><Link href="/assistants/converters/jsontotype">Json To Type</Link></li>
                  <li><Link href="/auth/login">Login</Link></li>
                  <li><Link href="/auth/forgot-password">Reset Password</Link></li>
                </ul>
              </li>

              {session ? (
                <>
                  <li className="softora-dd">
                    <Link href="/dashboard">Dashboard</Link>
                  </li>
                  <li className="softora-dd">
                    <Link href="/profile">Profile</Link>
                  </li>
                </>
              ) : null}
            </ul>

            <div className="d-flex align-items-center mt-4 mt-lg-0">
              {/* Search Button */}
              <div className="header-search-btn" id="searchButton">
                <button className="btn">
                  <i className="ti ti-search"></i>
                </button>
              </div>

              {/* Button */}
              {session ? (
                <button
                  onClick={() => signOut({ callbackUrl: "/auth/login" })}
                  className="btn btn-primary"
                >
                  Logout <i className="ti ti-logout"></i>
                </button>
              ) : (
                <Link href="/auth/register" className="btn btn-primary">
                  Get Started <i className="ti ti-arrow-up-right"></i>
                </Link>
              )}
            </div>
          </div>
        </div>
      </nav>
    </header>
  );
}