/**
 * AuthLayout - 认证页面布局
 * 用于登录、忘记密码、重置密码等页面
 * 
 * 布局：左侧品牌区 + 右侧表单区
 */

import type { ReactNode } from 'react'
import styles from './AuthLayout.module.css'

interface AuthLayoutProps {
  children: ReactNode
}

export function AuthLayout({ children }: AuthLayoutProps) {
  return (
    <div className={styles.container}>
      {/* 左侧品牌区 */}
      <aside className={styles.brand}>
        <div className={styles.brandContent}>
          <h1 className={styles.brandTitle}>用户管理系统</h1>
          <p className={styles.brandDesc}>
            企业级用户管理解决方案
          </p>
          <ul className={styles.features}>
            <li>支持多种登录方式</li>
            <li>基于角色的权限控制</li>
            <li>完整的审计日志</li>
            <li>安全的双因素认证</li>
          </ul>
        </div>
      </aside>

      {/* 右侧表单区 */}
      <main className={styles.main}>
        <div className={styles.formContainer}>
          {children}
        </div>
      </main>
    </div>
  )
}
