import React, { useEffect, useRef, useState } from "react";
import style from "./account.module.css";
import { useDispatch, useSelector } from "react-redux";
import { accountStoreActions } from "@/store/account";
const AccountCheckout = (props) => {
  const accountLogin = useSelector((state) => state.accountStore.loggedIn);
  const dispatch = useDispatch();
  useEffect(() => {
    if (accountLogin === true) {
      props.onAccountLoggedIn();
      dispatch(accountStoreActions.closeSignUpUI());
    } else {
      dispatch(accountStoreActions.openSignInUI());
    }
  }, [accountLogin]);
  return (
    <div className={style.section_data}>
      <div
        className={`secondary-btn ${style.login_btn}`}
        onClick={() => dispatch(accountStoreActions.openSignInUI())}
      >
        Login Now
      </div>
      <div className={style.button_layer_footer}></div>
    </div>
  );
};

export default AccountCheckout;
