import styled from 'styled-components';

import { Link, Navigate } from 'react-router-dom';
import { LoginForm, LoginInfo } from '../../components/login';

import LogoUrl from '../../assets/img/logo.png';

const Login = () => {
	const isToken = sessionStorage.getItem('token') ? true : false;

	return (
		<>
			{isToken ? (
				<Navigate to="/main" replace={true} />
			) : (
				<FormBox>
					<Logo src={LogoUrl} alt="caliverse" />
					<LoginTitle>ADMIN LOGIN</LoginTitle>
					<LoginForm />
					<JoinButton to="/account/regist">회원가입</JoinButton>
					{/* <Divider>|</Divider>
					<PwdButton to="/account/pwdreset">비밀번호 찾기</PwdButton> */}
					<LoginInfo />
				</FormBox>
			)}
		</>
	);
};

export default Login;

const Divider = styled.span`
  margin: 0 8px;
  color: RGB(217,217,217);
  padding: 4px 0;
`;

const PwdButton = styled(Link)`
	text-decoration: underline;
	font-size: 14px;
	margin: 28px 0;
	border-radius: 0;
	color: #8d8d8d;
`;

const JoinButton = styled(Link)`
	text-decoration: underline;
	font-size: 14px;
	margin: 28px 0;
	border-radius: 0;
	color: #8d8d8d;
`;

const FormBox = styled.div`
	background: #fff;
	width: 486px;
	padding: 75px 45px;
	text-align: center;
	border-radius: 30px;
`;

const Logo = styled.img`
	display: block;
	margin: auto;
`;

const LoginTitle = styled.span`
	background: #ececec;
	border-radius: 50px;
	color: #adadad;
	margin-top: 40px;
	font-size: 12px;
	display: inline-block;
	width: 110px;
	padding: 5px 10px;
	letter-spacing: 1px;
`;
