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, packUpAndLeave, token } = props;

  const mobileMainHeadingClass = menuOpen
    ? "mobileMainHeadingShow"
    : "mobile-main-heading-hide";

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

  return (
    <div className={mobileMainHeadingClass}>
      <div className={mobileHeadingWrapperClass}>
        <div className="mobileHeadingClose">
          <div className="mobileHeadingCloseInner">
            <a className="mobileHeadingButton" onClick={navToggle}></a>
          </div>
        </div>
        <div className="mobileHeadingLinkWrap">
          {!token ? (
            <div className="mobile-info-box">
              <div className="contact-detail-one">
                <a
                  className="contact-link"
                  onClick={() => packUpAndLeave("login")}
                >
                  Login
                </a>
              </div>
              <div className="contact-detail-two">
                <a
                  className="contact-link-two"
                  onClick={() => packUpAndLeave("features")}
                >
                  Features
                </a>
              </div>
              <div className="contact-detail-three">
                <a
                  className="nav-link-three"
                  onClick={() => packUpAndLeave("signup")}
                >
                  Signup
                </a>
              </div>
              <div className="contact-detail-one">
                <a className="contact-link" onClick={() => packUpAndLeave("")}>
                  Blog
                </a>
              </div>
            </div>
          ) : (
            <div className="mobile-info-box">
              <div className="contact-detail-one">
                <a
                  className="contact-link"
                  onClick={() => packUpAndLeave("dashboard")}
                >
                  Dashboard
                </a>
              </div>
              <div className="contact-detail-twotwo">
                <a
                  className="contact-link-twotwo"
                  onClick={() => packUpAndLeave("cases")}
                >
                  Cases
                </a>
              </div>
              <div className="contact-detail-threethree">
                <a
                  className="nav-link-threthree"
                  onClick={() => packUpAndLeave("documents")}
                >
                  Documents
                </a>
              </div>
              <div className="contact-detail-one">
                <a
                  className="contact-linklink"
                  onClick={() => packUpAndLeave("")}
                >
                  Blog
                </a>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}