import React from "react";
import "./MioCommerceNavigation.css";
import Logo from "./svg/logo";
import MioSvg from "./svg/mioSvg";
import imageMci from "./images/mci_logo_orange_v3-64x64 1.png";
import webSiteBuilder from "./images/logo_orange_website_product_v6_64x64 1.png";
import market from "./images/marketplace_logo_orange_background 1.png";
import free from "./images/Group 85.png";
import HelpComponentMioCommerce from "./HelpComponentMioCommerce";

const MioCommerceNavigation = ({ children }) => {
  return (
    <div className="miocommerceLayout">
      <div className="miocommerceNav">
        <div className="miocommerceNavHeader__left">
          <a
            href="https://ops2.miocommerce.com/ecommerce"
            className="miocommerceNavHeader__left__logo"
          >
            <Logo />
          </a>
        </div>
        <div className="miocommerceNavHeader__right">
          <div className="miocommerceNavHeader__right__try-live-tour">
            <a href="https://demo-ops2.miocommerce.com/">
              <span>Try Live Tour</span>
            </a>
            <a href="https://ops.miocommerce.com/ops/search">
              <span>Search</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path d="M384 208A176 176 0 1 0 32 208a176 176 0 1 0 352 0zM343.3 366C307 397.2 259.7 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 51.7-18.8 99-50 135.3L507.3 484.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L343.3 366z" />
              </svg>
            </a>
            <a href="https://signin.miocommerce.com/signout">
              <span>Sign Out</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path d="M507.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-128-128c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L457.4 240 176 240c-8.8 0-16 7.2-16 16s7.2 16 16 16l281.4 0L356.7 372.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l128-128zM176 64c8.8 0 16-7.2 16-16s-7.2-16-16-16L80 32C35.8 32 0 67.8 0 112L0 400c0 44.2 35.8 80 80 80l96 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-96 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48l96 0z" />
              </svg>
            </a>
            <HelpComponentMioCommerce />
          </div>
        </div>
      </div>
      <div className="miocommerceContent">
        <div className="mioccommerceSidebar">
          <a
            href="https://ops2.miocommerce.com/ecommerce"
            data-tooltip="All in one E-commerce"
          >
            <MioSvg />
          </a>
          <a
            href="https://ops2.miocommerce.com/mci"
            data-tooltip="Multi channel inbox"
          >
            <img src={imageMci} alt="Multi channel inbox" />
          </a>
          <a href="#" className="active" data-tooltip="Website Builder">
            <img src={webSiteBuilder} alt="Web Site Builder" />
          </a>
          <a
            href="https://ops2.miocommerce.com/marketplace"
            data-tooltip="Marketplace"
          >
            <img src={market} alt="Market" />
          </a>
          <a
            href="https://ops2.miocommerce.com/free-stuff"
            data-tooltip="Get your Free stuff!"
          >
            <img src={free} alt="Free" />
          </a>
        </div>
        <div className="miocommerceMain">{children}</div>
      </div>
    </div>
  );
};

export default MioCommerceNavigation;
