import React, { ReactNode } from 'react';

import Head from 'next/head';

import { ThemeProvider } from '~/pages/ThemeProvider';

type Props = {
  title: string,
  className?: string,
  children?: ReactNode,
}

export const RawLayout = ({ children, title, className }: Props): JSX.Element => {

  const classNames: string[] = ['wrapper'];
  if (className != null) {
    classNames.push(className);
  }

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta charSet="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <ThemeProvider theme="">
        <div className={classNames.join(' ')} data-light={true}>
          {children}
        </div>
      </ThemeProvider>
    </>
  );
};
