import React, { ReactNode } from 'react';

import { AuthFooter } from './AuthFooter';
import { AuthMascot } from './AuthMascot';
import { authLayoutRootVars } from './layoutConfig';
import * as css from './styles.css';

type AuthSplashScreenProps = {
  children?: ReactNode;
};

export function AuthSplashScreen({ children }: AuthSplashScreenProps) {
  // No children = bare splash gate (cold init, sync wait): center the mascot
  // to match the Android 12+ native splash and bridge the native → web
  // handoff. With children (errors, missing-IDB, retry dialogs) keep the
  // top-anchored mascot so the dialog has the lower half free.
  const splash = !children;
  return (
    <div className={css.AuthLayout} style={authLayoutRootVars}>
      <div className={splash ? `${css.AuthStack} ${css.AuthStackSplash}` : css.AuthStack}>
        <AuthMascot centered={splash} />
        {children && <div className={css.AuthSplashContent}>{children}</div>}
      </div>
      {!splash && <AuthFooter />}
    </div>
  );
}