import React, { useState } from "react";

import "./LoginPage.scss";

function LoginPage() {
  const [loginMode, setLoginMode]: [boolean, Function] = useState(true);
  const [id, setId] = useState('');
  const [password, setPassword] = useState('');

  return (
    <div className="login-page">
      {loginMode ? (
        <>
          <h2>로그인</h2>
          <div className="login-field">
            <input type="text" placeholder="아이디" value={id} onChange={e => setId(e.target.value)}/>
            <input type="password" placeholder="패스워드" value={password} onChange={e => setPassword(e.target.value)} />
          </div>
          <button>로그인</button>
          <p>아직 회원이 아니라면 <button onClick={() => setLoginMode(false)}>회원가입</button>을 먼저 진행해주세요.</p>
        </>
      ) : (
        <>
          <h2>회원가입</h2>
          <button onClick={() => setLoginMode(true)}>로그인하기</button>
        </>
      )}
    </div>
  );
}

export default LoginPage;