import type { ReactNode } from 'react';

import { Logo } from '../shared/ui/ui';
import { LanguageSwitch } from '../widgets/LanguageSwitch';
import s from './auth.module.css';

/** Экран без каркаса: декоративный фон волны и стеклянная карточка по центру. */
export function AuthLayout({ children, footer }: { children: ReactNode; footer?: ReactNode }) {
  return (
    <div className={s.screen}>
      <div className={s.backdrop} aria-hidden>
        <span className={s.blob1} />
        <span className={s.blob2} />
        <span className={s.blob3} />
      </div>
      <header className={s.top}>
        <Logo />
        <LanguageSwitch />
      </header>
      <main className={s.center}>
        <section className={s.card}>{children}</section>
        {footer && <div className={s.footer}>{footer}</div>}
      </main>
    </div>
  );
}