text: import React from 'react';
  import Head from 'next/head';
  import CrystallizeLayout from '@crystallize/react-layout';
  
  import { Spinner } from 'ui';
  import GlobalStyle from 'ui/global';
  
  import Aside from './aside';
  import Header from './header';
  import Footer from './footer';
  import {
    Main,
    LoadingWrapper,
    SpinnerWrapper,
    LoadingTextWrapper,
  } from './styles';
  
  function Loader({ children }) {
    return (
      <LoadingWrapper>
        <div>
          <SpinnerWrapper>
            <Spinner size="40" />
          </SpinnerWrapper>
          <LoadingTextWrapper>
            {children || 'Vennligst vent...'}
          </LoadingTextWrapper>
        </div>
      </LoadingWrapper>
    );
  }
  
  export default function Layout({
    children,
    title,
    description,
    simple,
    loading,
  }) {
    return (
      <>
        <Head>
          <title key="title">{title || ''}</title>
          {description && (
            <meta key="description" name="description" content={description} />
          )}
        </Head>
        <GlobalStyle />
  
        <CrystallizeLayout right={simple ? null : Aside}>
          <Header simple={simple} />
          <Main>{loading ? <Loader /> : children}</Main>
          <Footer />
        </CrystallizeLayout>
      </>
    );
  }
  