"use client";

import React, { useContext, useEffect, useState } from "react";
import task from "@img/logo2.png";
import Image from "next/image";
import LoginStep from "@comp/LoginComponents/LoginStep";
import AppContext from "@ctx/AppContext";
import VerifyCodeStep from "@comp/LoginComponents/VerifyCodeStep";
import SignUp from "@comp/LoginComponents/SignUp";
import { useRouter } from "next/navigation";

const Login = (props) => {
  const CTX = useContext(AppContext);
  const stepLogin = CTX.state.stepLogin;
  const router = useRouter();

  useEffect(() => {
    if (typeof window !== "undefined") {
      const item = localStorage.token;
      if (!!item) {
        router.push("/home");
      }
    }
  }, []);

  return (
    <div className="pb-5 ">
      <div className="flex rtl">
        <div className="w-[200px] mx-auto pt-10 ">
          <Image src={task} className="w-[100px] mx-auto  rounded-2xl" />
        </div>
        <div className=" w-full  text-right mt-7">
          <h2 className=" text-balck text-[50px] font-bold">بریز</h2>
          <p className="mb-0">"مدیرت هارمونیک روتین ها "</p>
        </div>
      </div>

      {stepLogin == 0 ? (
        <LoginStep />
      ) : stepLogin == 1 ? (
        <VerifyCodeStep />
      ) : stepLogin == 2 ? (
        <SignUp />
      ) : (
        ""
      )}
    </div>
  );
};

export default Login;
