import type { ReactNode } from 'react';

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

/** Экран без каркаса: декоративная волна и стеклянная карточка по центру. */
export function AuthLayout({ children, footer }: { children: ReactNode; footer?: ReactNode }) {
  const theme = typeof document !== 'undefined' && document.documentElement.dataset.theme === 'light' ? 'light' : 'dark';
  return (
    <div className={s.screen}>
      <div className={s.backdrop} aria-hidden>
        <span className={s.blob1} />
        <span className={s.blob2} />
        <span className={s.blob3} />
        <div className={s.waveDecor}>
          <WaveButton interactive={false} size={620} label="" theme={theme} />
        </div>
      </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>
  );
}