import basicstore from '@/stores/home';
import AnchorLink from 'react-anchor-link-smooth-scroll';
import { SelectedPage } from '@/types/home';

const Header = () => {
  const { selected, setSelected } = basicstore();

  return (
    <header>
      <nav className="navbar navbar-expand-md navbar-light">
        <div className="nav-container container">
          <a className="navbar-brand mr-md-3 mr-auto" href="#">
            {' '}
            <img src="img/logo-full-white.svg" alt="img" />
          </a>
          <button className="navbar-toggler border-0 p-0" type="button" data-toggle="offcanvas">
            <div className="hamburger" id="hamburger-1">
              <span className="line" />
              <span className="line" />
              <span className="line" />
            </div>
          </button>
          <div className="navbar-collapse offcanvas-collapse">
            <div className="nav-wrapper">
              <ul className="navbar-nav">
                <li className="nav-item">
                  <AnchorLink
                    className={`nav-link ${SelectedPage.Home === selected && 'active'}`}
                    nav-data="Home"
                    href={`#${SelectedPage.Home}`}
                    onClick={() => setSelected(SelectedPage.Home)}
                  >
                    Home
                  </AnchorLink>
                </li>
                <li className="nav-item">
                  <AnchorLink
                    className={`nav-link ${SelectedPage.Team === selected && 'active'}`}
                    nav-data="Team"
                    href={`#${SelectedPage.Team}`}
                    onClick={() => setSelected(SelectedPage.Team)}
                  >
                    Team
                  </AnchorLink>
                </li>
                <li className="nav-item">
                  <AnchorLink
                    className={`nav-link ${SelectedPage.Tockenomics === selected && 'active'}`}
                    nav-data="Tokenomics"
                    href={`#${SelectedPage.Tockenomics}`}
                    onClick={() => setSelected(SelectedPage.Tockenomics)}
                  >
                    Tokenomics
                  </AnchorLink>
                </li>
                <li className="nav-item">
                  <a className="nav-link" nav-data="Roadmap" href="#">
                    Roadmap
                  </a>
                </li>
                <li className="nav-item">
                  <AnchorLink
                    className={`nav-link ${SelectedPage.HowtoBuyProps === selected && 'active'}`}
                    nav-data="How to Buy PROPS"
                    href={`#${SelectedPage.HowtoBuyProps}`}
                    onClick={() => setSelected(SelectedPage.HowtoBuyProps)}
                  >
                    How to Buy PROPS
                  </AnchorLink>
                </li>
                <li className="nav-item active sub-menu-li">
                  <AnchorLink
                    className={`nav-link ${SelectedPage.Resources === selected && 'active'}`}
                    nav-data="Resources"
                    href={`#${SelectedPage.Resources}`}
                    onClick={() => setSelected(SelectedPage.Resources)}
                  >
                    Resources
                    {/* <span className="nav-arrow">
                      <img src="img/nav-arw-down.svg" alt="" />
                    </span> */}
                  </AnchorLink>
                  {/* <div className="sub-menu-block">
                    <ul className="sub-menu">
                      <li>
                        <a className="sub-nav-link" href="#">
                          Resources 1
                        </a>
                      </li>
                      <li>
                        <a className="sub-nav-link" href="#">
                          Resources 2
                        </a>
                      </li>
                      <li>
                        <a className="sub-nav-link" href="#">
                          Resources 3
                        </a>
                      </li>
                    </ul>
                  </div> */}
                </li>
              </ul>
              <ul className="headerButton">
                <li>
                  <a className="navbar-btn" href="#">
                    Stake PROPS
                  </a>
                </li>
                <li>
                  <a className="navbar-btn navbar-marketplace" href="#">
                    Marketplace
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </header>
  );
};

export default Header;