import React from "react";
import Login from "./Login";
import Register from "./Register";
import ResetPassword from "./ResetPassword";
import logo from './img/logo.svg';
import banner from './img/banner.png';
import ball from './img/ball.png';
import img1 from './img/img1.png';
import img2 from './img/img2.png';
import '../loginRegister/LoginRegisterPage.scss';

function LoginRegisterPage(props){
  const {mygetHelmetapi} = props;
  return(
    <div className="loginRegister">
      <div className="login_register_left">
        <img src={logo} className="logo" alt="" onClick={()=>{window.location.href='/'}} />
        <img src={ball} className="ball" alt="" />
        <img src={banner} className="banner" alt="" />
      </div>
      <div className="login_register_right">
        {props.location.pathname === "/login" ? 
          <Login {...props}/> 
          : 
          props.location.pathname === "/register" ? 
          <Register mygetHelmetapi={mygetHelmetapi}/> 
          : 
          <ResetPassword mygetHelmetapi={mygetHelmetapi}/>
        }
        <img src={img1} className="img1" alt="" />
        <img src={img2} className="img2" alt="" />
      </div>
      <div className="clear"></div>
    </div>
  )
}
export default LoginRegisterPage;