import React, { ReactNode } from 'react';
import Head from 'next/head';
import Package from '../../../package.json';
import Header from './Header';
import Illustration from '../common/Illustration';

interface AuthLayoutProps {
  children: ReactNode;
  title: string;
  mainClassName?: string;
  splash?: boolean;
  auth?: boolean;
}

const AuthLayout: React.FC<AuthLayoutProps> = ({
  children,
  title,
  mainClassName,
  splash,
  auth,
}) => {
  return (
    <>
      <Head>
        <title>Dialimpics | {title}</title>
      </Head>
      <main className={`auth ${mainClassName || ''}`}>
        <Header auth={auth} splash={splash} />
        {children}
        <p className="version">v.{Package.version}</p>
        <Illustration />
      </main>
    </>
  );
};

export default AuthLayout;
