import { NavLink } from 'react-router-dom';
import { PATHS as HOMEPAGE } from './HomePage';

import logo from 'assets/fansifter.svg';
import { ReactComponent as DatabaseSVG } from 'assets/icons/database.svg';
import { ReactComponent as ProfilesSVG } from 'assets/icons/profiles.svg';
import { ReactComponent as FacebookSVG } from 'assets/icons/facebook.svg';
import { ReactComponent as SettingsSVG } from 'assets/icons/settings.svg';
import { ReactComponent as QuestionSVG } from 'assets/icons/question.svg';

import { Responsive } from 'components/helpers/Responsive';
import { ExternalLink } from 'components/router/ExternalLink';

import { NavBarButton } from './NavBarButton';
import './NavBar.css';

export const NavBar = () => {
  return (
    <div className="navbar flexNone flex flexColumn justifyBetween">
      <Responsive>
        <NavLink to="/">
          <img
            className="w100 h100 padding2 hover1"
            src={logo}
            alt="Fansifter"
          />
        </NavLink>
      </Responsive>

      <div>
        <NavBarButton to={`/${HOMEPAGE.workspace}`} title="Workspaces">
          <DatabaseSVG />
        </NavBarButton>
        <NavBarButton to={`/${HOMEPAGE.multiplayer}`} title="Alliances">
          <ProfilesSVG />
        </NavBarButton>
        <NavBarButton to={`/${HOMEPAGE.facebook}`} title="Audience Manager">
          <FacebookSVG />
        </NavBarButton>
      </div>

      <div className="mb6">
        <NavBarButton
          as={ExternalLink}
          href="https://help.fansifter.com"
          title="Help Center"
        >
          <QuestionSVG />
        </NavBarButton>
        <NavBarButton to={`/${HOMEPAGE.settings}`} title="Settings">
          <SettingsSVG />
        </NavBarButton>
      </div>
    </div>
  );
};