import React, { useEffect } from 'react';
import LoginForm from './form';
import styles from './style/index.module.less';

function Login() {
  useEffect(() => {
    document.body.setAttribute('arco-theme', 'light');
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles['login-card-wrapper']}>
        {/* 左侧插画区域 */}
        <div className={styles.banner}>
          <div className={styles['banner-inner']}>
            {/* Logo */}
            <div className={styles.logo}>
              <span className={styles['logo-text']}>Coder Admin</span>
            </div>

            {/* 插画区域 */}
            <div className={styles['illustration-wrapper']}>
              <div className={styles.illustration}>
                {/* 认证卡片 */}
                <div className={styles['auth-card']}>
                  <div className={styles['auth-card-header']}>
                    <div className={styles['scan-line']}></div>
                  </div>
                  <div className={styles['auth-card-avatar']}>
                    <div className={styles['avatar-circle']}></div>
                  </div>
                  <div className={styles['auth-card-info']}>
                    <div className={styles['info-line']}></div>
                    <div className={styles['info-line-short']}></div>
                  </div>
                  <div className={styles['check-icon']}>✓</div>
                </div>
                {/* 人物剪影 */}
                <div className={styles['person-silhouette']}></div>
              </div>
            </div>
          </div>
        </div>

        {/* 右侧登录表单区域 */}
        <div className={styles.content}>
          <div className={styles['content-wrapper']}>
            <LoginForm />
            <div className={styles.footer}>
              Copyright © 2024 Coder Admin. All Rights Reserved.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Login.displayName = 'LoginPage';

export default Login;