import React from "react";
import "../../styles/navpanel.scss";
import "../../styles/contact.scss";
import { Link } from "react-router-dom";

export default function Navpanel(props) {
  const { menuOpen, setMenuOpen, navToggle } = props;
  console.log("+++++++++menuOpen", menuOpen);
  const mobileMainHeadingClass = menuOpen
    ? "mobileMainHeadingShow"
    : "mobile-main-heading-hide";

  const mobileHeadingWrapperClass = menuOpen
    ? "mobile-heading-wrapper1"
    : "mobile-heading-wrapper";

  console.log("mobileMainHeadingClass", mobileMainHeadingClass);
  console.log("mobileHeadingWrapperClass", mobileHeadingWrapperClass);
  return (
    <div className={mobileMainHeadingClass}>
      <div className={mobileHeadingWrapperClass}>
        <div className="mobileHeadingClose">
          <div className="mobileHeadingCloseInner">
            <a className="mobileHeadingButton" onClick={navToggle}></a>
          </div>
        </div>
        <div className="mobileHeadingLinkWrap">
          <div className="mobile-info-box">
            <div className="contact-detail-one">
              <a className="contact-link" href="/login" onClick={navToggle}>
                Login
              </a>
            </div>
            <div className="contact-detail-two">
              <a
                className="contact-link-two"
                href="/features"
                onClick={navToggle}
              >
                Features
              </a>
            </div>
            <div className="contact-detail-three">
              <a className="nav-link-three" href="/signup" onClick={navToggle}>
                Signup
              </a>
            </div>
            <div className="contact-detail-one">
              <Link className="contact-link" href="/login" onClick={navToggle}>
                Blog
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}