import React, { memo } from 'react';
import classNames from 'classnames';
import Login from './components/Login';
import LoginHeader from './components/Header';
import { useAppSelector } from 'modules/store';
import { selectGlobal } from 'modules/global';

import Style from './index.module.less';

export default memo(() => {
  const globalState = useAppSelector(selectGlobal);
  const { theme } = globalState;
  return (
    <div
      className={classNames(Style.loginWrapper, { [Style.light]: theme === 'light', [Style.dark]: theme !== 'light' })}
    >
      <LoginHeader />
      <main className={Style.loginContent}>
        <div className={Style.titleContainer}>
          <h1 className={Style.title}>登录到</h1>
          <h1 className={Style.title}>元境幻生管理台</h1>
          <div className={Style.subTitle}><p className={classNames(Style.tip, Style.registerTip)}>管理员账户由系统安全策略统一配置</p></div>
        </div>
        <Login />
      </main>
      <footer className={Style.copyright}>
        MiragenFlow / 元境幻生 · 管理员控制台
      </footer>
    </div>
  );
});