import React from "react";
import Head from "next/head";

import styles from "./Layout.module.sass";
import { Sidebar } from "./Sidebar";
import MagicImage from "./MagicImage";

export const siteTitle = "Aite RP"

interface LayoutProps {
  children: React.ReactNode
}

export default function Layout(props: LayoutProps) {
  return (
    <div className={styles.wrapper}>
      <MagicImage opacity={0.50} alignH="right" fixed src="https://files.aiterp.net/misc/renders/2020-08-30%20-%20Archive.jpg">
      <Sidebar />
      <div className={styles.container}>
        <Head>
          <link rel="icon" href="/favicon.ico" />
          <meta
            key="description"
            name="description"
            content="Learn how to build a personal website using Next.js"
          />
          <meta key="og_title" name="og:title" content={"Aite RP"} />
        </Head>
          <main>{props.children}</main>
      </div>
    </MagicImage>
    </div>
  );
}
