'use client'
import Link from "next/link";
import Menu from "../Menu"
import MobileMenu from "../MobileMenu"
import { useState, useEffect } from "react"; // Import useState and useEffect

export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSidebar, handlePopup, handleSidebar }) {
  const [email, setEmail] = useState("");

  useEffect(() => {
    // Set the email address safely
    const user = "bloor";
    const domain = "rapharehab.ca";
    setEmail(`${user}@${domain}`);
  }, []);

  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.webp"
                    alt="Phone"
                    style={{ marginRight: "8px" }}
                    className="red-icon"
                  />
                  <Link href="tel:647-722-3434" aria-label="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"
                  />
                  {email ? (
                    <Link href={`mailto:${email}`} aria-label={email}>
                      <span style={{
                        color: "white",
                      }} >
                        {email}
                      </span>
                    </Link>
                  ) : (
                    <span style={{
                      color: "white",
                    }} >
                      Loading...
                    </span>
                  )}
                </li>
              </ul>

              <ul className="social-links clearfix">
                <li><Link href="/why-rapha-physiotherapy-etobicoke" aria-label="Why us">Why Us</Link></li>
                <li><Link href="/faq-physiotherapy-etobicoke" aria-label="Faq">FAQ's</Link></li>
                <li><Link href="/what-to-expect" aria-label="What to expect">What To Expect</Link></li>
                <li><Link href="/payment-insurance" aria-label="Payment and 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" aria-label="Instagram">
                    <i className="icon-4"></i>
                  </Link>
                </li>
                <li>
                  <Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                    <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="/" aria-label="Logo"><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="/" aria-label="Logo"><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>
    </>
  )
}