import React from "react";
import { graphql, HeadProps, PageProps, Script } from "gatsby";
import config from '../../../data/site-config';
import Base from "../../components/Base";
import SEO from "../../components/Seo";
import Comment from "../../components/Comment"
import { MDXProvider } from '@mdx-js/react';
import './styles.scss';

type queryLayoutProps = {
  mdx: {
    frontmatter: {
      title: string,
      date: string,
      last_update: string
    }
  }
  children: any
}

const Layout = ({ data, children }: PageProps<queryLayoutProps>) => {


  const post = data.mdx.frontmatter;

  return (
    <Base>
      <div className="post template">
        <div className="post page">
          <div className="article figure">
            <div className="HeaderContainer">
              <div style={{ display: 'grid', gridAutoFlow: 'column'}}>
                <small className="sub">
                  {post.date}
                </small>
                <p style={{ fontSize: 12 + 'px', justifySelf: 'end'}}>
                  Last update: {post.last_update}
                </p>
              </div>
              <h1 className="title">
                {post.title}
              </h1>
            </div>
            <MDXProvider>
              {children}
            </MDXProvider>
          </div>
        </div>
      </div>
        <Comment post_id={`${post.title}${Math.random()}`}/>
    </Base>
  )
}

export const pageQuery = graphql`
query($id: String) {
  mdx(id: { eq: $id }) {
    frontmatter {
      title
      date
      last_update
    }
  }
}
`;

export default Layout;

export const Head = (props: HeadProps<queryLayoutProps>) => {
  return (
    <SEO 
      title={`${props.data.mdx.frontmatter.title} | ${config.siteTitle}`} 
      description=""
      children=""
    />
  )
}
