import React, { useState } from "react";
import SVG from "react-inlinesvg";
import { Link, NavLink } from "react-router-dom";

import { BurgerButton } from "@components/BurgerMenu/burgerButton";
import { BurgerMenu } from "@components/BurgerMenu/burgerMenu";
import ModalAuth from "@components/Modal/ModalAuth/ModalAuth";
import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";

import authIcon from "assets/icons/authIcon.svg";

import "./authHeader.scss";

export const AuthHeader = () => {
  const [actionMenu, setActionMenu] = useState(false);
  const [modalReg, setModalReg] = useState(false);
  const [modalAuth, setModalAuth] = useState(false);

  return (
    <div className="auth-header">
      <BurgerMenu active={actionMenu} />
      <ModalRegistration active={modalReg} setActive={setModalReg} />
      <ModalAuth active={modalAuth} setActive={setModalAuth} />
      <div className="auth-header__navigation">
        <div className="auth__logo">
          <div>
            <BurgerButton active={actionMenu} setActive={setActionMenu} />
          </div>
          <NavLink to={"/"}>
            <h3>IT GUILD</h3>
          </NavLink>

          <div>
            <Link to="/auth">
              <SVG src={authIcon} />
            </Link>
          </div>
        </div>
        <div className="auth-nav">
          <ul>
            <li>
              <NavLink to={"/stack"}>аутстафинг</NavLink>
            </li>
            <li>
              <NavLink to={"/tracker-intro"}>трекер</NavLink>
            </li>
            <li>
              <NavLink to={"/auth-candidate"}>работа в IT</NavLink>
            </li>
          </ul>
        </div>
        <div className="auth__buttons">
          <button
            className="signIn"
            onClick={(e) => {
              e.preventDefault();
              setModalAuth(true);
            }}
          >
            войти
          </button>
          <button
            className="signUp"
            onClick={(e) => {
              e.preventDefault();
              setModalReg(true);
            }}
          >
            регистрация
          </button>
        </div>
      </div>
    </div>
  );
};