import Head from 'next/head';
import {FC, ReactNode} from 'react';

type DefaultLayoutProps = {
  title?: string,
  appName?: string,
  children?: ReactNode,
}

export const DefaultLayout: FC<DefaultLayoutProps> = ({
  title,
  appName = 'Tesseract Web (React)',
  children,
}) => {
  return (
    <>
      <Head>
        <title>
          {title ? `${title} | ${appName}` : appName}
        </title>
        {
          title
          && (
            <meta name="display-title" className="block lowercase text-6xl font-headings container mx-auto px-4 font-thin leading-none" content={title} />
          )
        }
      </Head>
      <main>
        {children}
      </main>
    </>
  )
}
