import React, { useState } from "react";
import { useNavigate } from "react-router";

import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import SideBar from "@components/SideBar/SideBar";

import ITguild from "assets/images/logo/ITguild.svg";

import "./welcomePage.scss";

export const WelcomePage = () => {
  const [loader, setLoader] = useState(false);
  const navigate = useNavigate();

  return (
    <div className="welcome-page">
      <AuthHeader />

      <div className="welcome-page-component">
        <div className="welcome-page-component__title">
          <img src={ITguild}></img>
          <h1>
            Добро пожаловать в <span>ITGuild</span>
          </h1>
        </div>
        <div className="welcome-page-component__text">
          <p>
            Создавайте и редактируйте задачи и проекты вместе с другими
            участниками
            <br /> команды. Сервис для работы с IT специалистами
          </p>
        </div>

        <div className="button-box">
          {loader ? (
            <Loader />
          ) : (
            <BaseButton
              onClick={() => {
                setLoader(true);
                navigate("/profile");
              }}
              styles="button-box__submit"
            >
              Начать
            </BaseButton>
          )}
        </div>
      </div>
      <SideBar />
      <Footer />
    </div>
  );
};