import { useEffect } from 'react';
import type { ReactNode } from 'react';
import './AuthLayout.css';

interface AuthLayoutProps {
    /** 页面标题，如「登录」 */
    title: string;
    /** 标题下的一行说明 */
    subtitle: string;
    /** 卡片底部的切换入口 */
    footer: ReactNode;
    children: ReactNode;
}

/** 注册/登录共用的居中卡片布局，品牌视觉与 MainLayout 一致 */
const AuthLayout = ({ title, subtitle, footer, children }: AuthLayoutProps) => {
    useEffect(() => {
        document.title = `${title} - Atlas Seller Kit`;
    }, [title]);

    return (
        <div className="auth-page">
            <div className="auth-panel">
                <div className="auth-brand">
                    <div className="auth-logo">Atlas Kit</div>
                    <div className="auth-logo-subtitle">商品工作台</div>
                </div>
                <div className="auth-card">
                    <div className="auth-title">{title}</div>
                    <div className="auth-subtitle">{subtitle}</div>
                    {children}
                    <div className="auth-footer">{footer}</div>
                </div>
            </div>
        </div>
    );
};

export default AuthLayout;