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

export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSidebar, handlePopup, handleSidebar }) {
  return (
    <>
      <header className={`main-header ${scroll ? "fixed-header" : ""}`}>
        {/* Header Top */}
        <div className="header-top">
          <div className="auto-container">
            <div className="top-inner">
              <ul className="info-list clearfix">
                <li>
                  <img
                    src="/assets/images/icons/call.png"
                    alt="Phone"
                    style={{ marginRight: "8px" }}
                    className="red-icon"
                  />
                  <Link href="tel:647-722-3434">
                    <span style={{
                      color: "white",
                    }}>
                      647-722-3434
                    </span>
                  </Link>
                </li>
                <li>
                  <img
                    src="/assets/images/icons/mail.png"
                    alt="Mail"
                    style={{ marginRight: "8px" }}
                    className="red-icon"
                  />
                  <Link href="mailto:bloor@rapharehab.ca">
                    <span style={{
                      color: "white",
                    }}>
                      bloor@rapharehab.ca
                    </span>
                  </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="/refugee-physiotherapy">Refugee Physiotherapy</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>
        </div>

        {/* Header Upper */}
        <div className="header-lower">
          <div className="outer-container">
            <div className="outer-box new">
              <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 new-menu navbar-expand-md navbar-light clearfix">
                  <div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
                    <Menu />
                  </div>
                </nav>
              </div>
            </div>
          </div>
        </div>

        <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>

        <MobileMenu handleMobileMenu={handleMobileMenu} />
      </header>
    </>
  )
}