import { DocWeaveLogo } from "../DocWeaveLogo";
import "./AuthLayout.css";

export function AuthLayout({ eyebrow, title, subtitle, children, footer }) {
    return (
        <div className="dw-auth">
            <div className="dw-auth__panel">
                <div className="dw-auth__brand">
                    <DocWeaveLogo size={48} className="dw-auth__logo" />
                    <span className="dw-auth__wordmark">DocWeave</span>
                </div>

                <div className="dw-auth__card">
                    {eyebrow && <span className="dw-auth__eyebrow">{eyebrow}</span>}
                    <h1 className="dw-auth__title">{title}</h1>
                    {subtitle && <p className="dw-auth__subtitle">{subtitle}</p>}

                    <div className="dw-auth__body">{children}</div>
                </div>

                {footer && <div className="dw-auth__footer">{footer}</div>}
            </div>

            <div className="dw-auth__aside" aria-hidden="true">
                <div className="dw-auth__aside-grid" />
                <div className="dw-auth__aside-copy">
                    <span className="dw-auth__tagline-line">AI proposes.</span>
                    <span className="dw-auth__tagline-line">Rules validate.</span>
                    <span className="dw-auth__tagline-line">Humans decide.</span>
                    <span className="dw-auth__tagline-line dw-auth__tagline-line--accent">Knowledge commits.</span>
                </div>
            </div>
        </div>
    );
}