import Link from "next/link";

export default function OffcanvusMenu({ isOffcanvus, handleOffcanvus }) {
  return (
    <>
      <div className={`offCanvas__info ${isOffcanvus ? "active" : ""}`}>
        <div
          className="offCanvas__close-icon menu-close"
          onClick={handleOffcanvus}
        >
          <button>
            <i className="far fa-window-close" />
          </button>
        </div>
        <div className="offCanvas__logo mb-30">
          <Link href="/">
            <img src="/assets/img/logo/logo.png" alt="Logo" />
          </Link>
        </div>
        <div className="offCanvas__side-info mb-30">
          <div className="contact-list mb-30">
            <h4>Office Address</h4>
            <p>Suite B, 1934 N. Druid Hills Rd, Brookhaven, GA 30319, USA</p>
          </div>
          <div className="contact-list mb-30">
            <h4>Phone Number</h4>
            <p>(470) 260-4117</p>
          </div>
          <div className="contact-list mb-30">
            <h4>Email Address</h4>
            <p>support@rankrunners.net</p>
          </div>
        </div>
        <div className="offCanvas__social-icon mt-30">
          <Link href="https://www.facebook.com/profile.php?id=61561349362241">
            <i className="fab fa-facebook-f" />
          </Link>
          <Link href="https://www.youtube.com/@RankRunners">
            <i className="fab fa-youtube" />
          </Link>
          <Link href="https://www.instagram.com/rankrunnersseo/">
            <i className="fab fa-instagram" />
          </Link>
          <Link href="https://www.linkedin.com/company/rankrunnersseo/">
            <i className="fab fa-linkedin-in" />
          </Link>
        </div>
      </div>
      <div
        className={`offCanvas__overly ${isOffcanvus ? "active" : ""}`}
        onClick={handleOffcanvus}
      />
    </>
  );
}