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

export default function Header2({ scroll, isMobileMenu, handleMobileMenu, isSidebar, handlePopup, handleSidebar }) {
    return (
        <>
            <header className={`main-header header-style-two ${scroll ? "fixed-header" : ""}`}>
                {/* Header Top */}
                <div className="header-top">

                    <div className="top-inner">
                        <ul className="info-list clearfix">
                            <li>
                                <img src="/assets/images/icons/call.png" alt="Phone" style={{ marginRight: "8px" }} />
                                <Link href="tel:647-722-3434">647-722-3434</Link>
                            </li>
                            <li>
                                <img src="/assets/images/icons/mail.png" alt="Mail" style={{ marginRight: "8px" }} />
                                <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</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="/"><i className="icon-5"></i></Link></li> */}
                            {/* <li><Link href="/"><i className="icon-6"></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 Upper */}
                <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>

                            {/* Menu Right Content */}
                            {/* <ul className="menu-right-content">

                                <li className="search-box-outer search-toggler" onClick={handlePopup}>
                                    <i className="icon-27"></i>
                                </li>
                                <li className="nav-btn nav-toggler navSidebar-button clearfix" onClick={handleSidebar}>
                                    <i className="icon-28"></i>
                                </li>
                            </ul> */}
                            <div className="menu-area">
                                {/* Mobile Navigation Toggler */}
                                <div className="mobile-nav-toggler" onClick={handleMobileMenu}>
                                    <i className="icon-bar"></i>
                                    <i className="icon-bar"></i>
                                    <i className="icon-bar"></i>
                                </div>
                                {/* Main Menu */}
                                <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>
                {/*End Header Upper*/}
                {/* 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>
                            <ul className="menu-right-content">

                                {/* <li className="search-box-outer search-toggler" onClick={handlePopup}>
                            <i className="icon-27"></i>
                            </li> */}
                                {/* <li className="nav-btn nav-toggler navSidebar-button clearfix" onClick={handleSidebar}>
                                    <i className="icon-28"></i>
                                </li> */}
                            </ul>

                        </div>
                    </div>
                </div>{/* End Sticky Menu */}
                {/* Mobile Menu  */}

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