import Link from "next/link"
import Menu2 from "../Menu2"
import Menu3 from "../Menu3"
import MobileMenu from "../MobileMenu"

export default function Header2({ scroll, isMobileMenu, handleMobileMenu }) {
	return (
		<>


			{/* Main Header / Header Style Two */}
			<header className={`main-header header-style-two ${scroll ? "fixed-header" : ""}`}>

				{/* Header Upper */}
				<div className="header-upper">
					<ul className="social-list">
						<li>
							<Link
								href="https://www.facebook.com/people/Sixty5street/61578269162880/"
								target="_blank"
								rel="noopener noreferrer"
							>
								<span className="icon fa fa-facebook"></span>
							</Link>
						</li>

						{/* <li><Link href="#"><span className="icon fa fa-twitter"></span></Link></li> */}

						<li>
							<Link
								href="https://www.instagram.com/sixty5street?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw=="
								target="_blank"
								rel="noopener noreferrer"
							>
								<span className="icon fa fa-instagram"></span>
							</Link>
						</li>
					</ul>
					<div className="auto-container">
						<div className="clearfix">

							<div className="pull-left logo-box">
								<div className="logo"><Link href="/"><img src="/assets/images/logo/logo-white.png" alt="Sixty5 Street header with signature fusion dishes in Etobicoke" title="" loading="lazy"/></Link></div>
							</div>

							<div className="nav-outer clearfix">
								{/* Mobile Navigation Toggler */}
								<div className="mobile-nav-toggler"><span className="icon flaticon-menu" onClick={handleMobileMenu}></span></div>
								{/* Main Menu */}
								<nav className="main-menu navbar-expand-md">
									<div className="navbar-header">
										<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
											<span className="icon-bar"></span>
											<span className="icon-bar"></span>
											<span className="icon-bar"></span>
										</button>
									</div>

									<div className="navbar-collapse scroll-nav show collapse clearfix" id="navbarSupportedContent">
										<Menu2 />
										<Menu3 />

									</div>

								</nav>

							</div>

						</div>
					</div>
				</div>
				{/* End Header Upper */}
				<MobileMenu handleMobileMenu={handleMobileMenu} />



			</header>
			{/* End Main Header */}

		</>
	)
}
