"use client";
import React, { useEffect, useState } from "react";
import styles from "./Header.module.scss";
import Image from "next/image";
import LinkButton from "@/components/LinkButton/LinkButton";
import SiteLogo from "../../../public/images/site-logo.svg";
import Link from "next/link";

const Header = () => {
  const [isToggle, setIsToggle] = useState(false);
  // const headerHeight: number = 170;
  const NavList = [
    {
      LinkTitle: `Home`,
      LinkUrl: `home`,
    },
    {
      LinkTitle: `About Us`,
      LinkUrl: `about-us`,
    },
    {
      LinkTitle: `Features`,
      LinkUrl: `features`,
    },
    {
      LinkTitle: `Contact Us`,
      LinkUrl: `contact-us`,
    },
  ];

  useEffect(() => {
    if (isToggle) {
      document.body.classList.add("mobileOpen");
    } else {
      document.body.classList.remove("mobileOpen");
    }

    return () => {
      document.body.classList.remove("mobileOpen");
    };
  }, [isToggle]);

  const handleScroll = (id: string) => {
    const section = document.getElementById(id);
    const header = document.querySelector("header");

    if (section && header) {
      const headerHeight = header.offsetHeight; // Dynamically get the header height based on viewport size
      const yOffset = -headerHeight;
      const yPosition =
        section.getBoundingClientRect().top + window.pageYOffset + yOffset;

      window.scrollTo({ top: yPosition, behavior: "smooth" });
    }
    setIsToggle(false);
  };

  return (
    <header className={`${styles.header}`}>
      <div className="container-fluid">
        <div
          className={`flex justify-between items-center ${styles.headerWrapper}`}
        >
          <div className={`${styles.headerLogo}`}>
            <Link
              href="/"
              className="block"
              onClick={(e) => {
                e.preventDefault(); // Prevent the default link behavior
                handleScroll("home"); // Smooth scroll to section
                setIsToggle(false)
              }}
            >
              <Image src={SiteLogo} alt="SiteLogo" />
            </Link>
          </div>
          <nav className={`${styles.navList} navList`}>
            <ul className={`block lg:flex lg:items-center ${styles.navMenu}`}>
              {NavList.map((menu, i) => {
                return (
                  <React.Fragment key={i}>
                    <li>
                      <Link
                        href={`#${menu.LinkUrl}`}
                        onClick={(e) => {
                          e.preventDefault(); // Prevent the default link behavior
                          handleScroll(menu.LinkUrl); // Smooth scroll to section
                          setIsToggle(false)
                        }}
                      >
                        {menu.LinkTitle}
                      </Link>
                    </li>
                  </React.Fragment>
                );
              })}
            </ul>
          </nav>
          <div
            className={`flex items-center gap-2 xsm:gap-4 ${styles.btnWrapper}`}
          >
            <LinkButton href="/">Download App</LinkButton>
            <div className={`toggleBtn`} onClick={() => setIsToggle(!isToggle)}>
              <i></i>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;