'use client'
import Link from "next/link";
import Menu from "../Menu";
import MobileMenu from "../MobileMenu";

export default function Header2({
  scroll,
  isMobileMenu,
  handleMobileMenu,
  handlePopup,
  handleSidebar,
  isHome = false,
}) {
  return (
    <>
      <header
        className={`main-header header-style-two ${scroll ? "fixed-header" : ""} ${isHome ? "home-page" : ""}`}
      >
        {/* Header Top */}
        <div className="header-top">
          <div className="top-inner">
            <ul className="info-list clearfix">
              <li>
                <img
                  src="/assets/images/icons/call.webp"
                  alt="Phone"
                  className="contact-icon"
                />
                <Link href="tel:647-722-3434">647-722-3434</Link>
              </li>
              <li>
                <img
                  src="/assets/images/icons/mail.webp"
                  alt="Mail"
                  className="contact-icon"
                />
                <Link href="mailto:bloor@rapharehab.ca">bloor@rapharehab.ca</Link>
              </li>
            </ul>

            <ul className="social-links clearfix">
              <li><Link href="/why-rapha-physiotherapy-etobicoke">Why Us</Link></li>
              <li><Link href="/faq-physiotherapy-etobicoke">FAQ’s</Link></li>
              <li><Link href="/what-to-expect">What To Expect</Link></li>
              <li><Link href="/payment-insurance">Payment And Insurance</Link></li>
              <li>
                <Link href="https://www.instagram.com/elrapharehab/" target="_blank" rel="noopener noreferrer">
                  <i className="icon-4"></i>
                </Link>
              </li>
              <li>
                <Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank" rel="noopener noreferrer">
                  <i className="icon-7"></i>
                </Link>
              </li>
            </ul>
          </div>
        </div>

        {/* Header Lower */}
        <div className="header-lower">
          <div className="outer-container">
            <div className="outer-box">
              <div className="logo-box">
                <figure className="logo">
                  <Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
                </figure>
              </div>

              <div className="menu-area">
                <div className="mobile-nav-toggler" onClick={handleMobileMenu}>
                  <i className="icon-bar"></i>
                  <i className="icon-bar"></i>
                  <i className="icon-bar"></i>
                </div>

                <nav className="main-menu navbar-expand-md navbar-light clearfix">
                  <div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
                    <Menu />
                  </div>
                </nav>
              </div>
            </div>
          </div>
        </div>

        {/* Sticky Header */}
        <div className="sticky-header">
          <div className="auto-container">
            <div className="outer-box">
              <div className="logo-box">
                <figure className="logo">
                  <Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
                </figure>
              </div>

              <nav className="main-menu navbar-expand-md navbar-light clearfix">
                <div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
                  <Menu />
                </div>
              </nav>
            </div>
          </div>
        </div>

        {/* Mobile Menu */}
        <MobileMenu handleMobileMenu={handleMobileMenu} />
      </header>
    </>
  );
}