import styles from './AuthLayout.module.css';

interface AuthLayoutProps {
	children: React.ReactNode;
}

/**
 * AuthLayout — frame for the login / register pages.
 *
 * Desktop: keeps the existing side-by-side "card" — purple branded
 *   background, centred dialog with a logo column on the left and
 *   the form on the right.
 *
 * Mobile (≤768px): collapses into a full-screen `--background-primary`
 *   surface with the logo + wordmark stacked at the top of the form
 *   column, matching the Fluxer mobile reference. The card chrome,
 *   purple background, and pattern are all hidden via the media
 *   query in `AuthLayout.module.css`.
 */
export function AuthLayout({ children }: AuthLayoutProps) {
	return (
		<div className={styles.container}>
			<div className={styles.pattern} />
			<div className={styles.cardContainer}>
				<div className={styles.card}>
					<div className={styles.logoSide}>
						<div className={styles.logoIcon}>B</div>
						<span className={styles.wordmark}>Brycord</span>
					</div>
					<div className={styles.formSide}>
						{/* Mobile-only logo banner — appears above the form
						    when the side column is hidden. The
						    `data-mobile-logo` attribute is what the CSS
						    media query targets to switch its display. */}
						<div className={styles.mobileLogo} data-mobile-logo>
							<div className={styles.mobileLogoIcon}>B</div>
							<span className={styles.mobileWordmark}>Brycord</span>
						</div>
						{children}
					</div>
				</div>
			</div>
		</div>
	);
}