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

interface LayoutProps {
  children: ReactNode;
  title: string;
  mainClassName?: string;
  onDark?: boolean;
}

const Layout: React.FC<LayoutProps> = ({
  children,
  title,
  mainClassName,
  onDark,
}) => {
  return (
    <>
      <Head>
        <title>{`Dialimpics | ${title}`}</title>
      </Head>
      <main className={`layout ${mainClassName || ''}`}>
        <Header onDark={onDark} />
        {children}
        <p className="version">v.{Package.version}</p>
        <footer>
          <LogoNordisk white={onDark} />
        </footer>
      </main>
    </>
  );
};

export default Layout;
