import React from "react";
import Link from "next/link";
import NavMenu from "./NavMenu";
import useSticky from "@/hooks/useSticky";

const Header2 = () => {
    const sticky = useSticky();

    const openOffcanvas = () => {
        document.querySelector(".offcanvas__info")?.classList.add("info-open");
        document.querySelector(".offcanvas__overlay")?.classList.add("overlay-open");
    };

    const openSearch = () => {
        document.querySelector(".df-search-area")?.classList.add("opened");
        document.querySelector(".body-overlay")?.classList.add("opened");
    };

    return (
        <header>
            <div id="header-sticky" className={`header-area header-style-two ${sticky ? 'sticky' : ''}`}>
                <div className="large-container">
                    <div className="mega-menu-wrapper">
                        <div className="header-main">
                            <div className="header-left">
                                <div className="header-logo">
                                    <Link href="/"><img src="/assets/img/home/footer/footer-logo-black.webp" alt="header logo" /></Link>
                                </div>
                            </div>
                            <div className="header-right d-flex justify-content-end">
                                <div className="mean__menu-wrapper d-none d-lg-block">
                                    <div className="main-menu">
                                        <nav id="mobile-menu"><NavMenu /></nav>
                                    </div>
                                </div>
                                <div
                                    className="search-toggle-open header-search my-auto"
                                    onClick={openSearch}
                                >
                                    <div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
                                </div>
                                <div className="header-shopping-cart my-auto">
                                    <div className="cart-icon"><a href="#"><i className="fa-solid fa-cart-shopping"></i></a></div>
                                </div>
                                <div className="header-action d-none d-xl-inline-flex gap-5">
                                    <div className="header-link">
                                        <Link className="primary-btn-2 btn-hover" href="/contact">
                                            GET A QUOTE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                            <span className="btn-hover-span"></span>
                                        </Link>
                                    </div>
                                </div>
                                <div className="header-action">
                                    <div className="header-link-1">
                                        <div className="icon text-white"><i className="fa-solid fa-phone-volume"></i></div>
                                        <div className="content">
                                            <span className="text-white">Call Us Now</span>
                                            <h6><a href="tel:2085550112" className="text-white">+208-555-0112</a></h6>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    className="header__hamburger d-xl-none my-auto"
                                    onClick={openOffcanvas}
                                >
                                    <div className="sidebar__toggle">
                                        <a className="bar-icon" href="javascript:void(0)">
                                            <i className="fa-solid fa-bars"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    );
};

export default Header2;
