import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'

import Header from '../components/Header'
import Footer from '../components/Footer'
import SideMenu from '../components/SideMenu'

import '../styles/index.css'
import '../styles/general.css'

import favicon32 from '../images/favicon32.png'

const Layout = ({ children, data }) => (
  <div className="font-sans mx-auto">
    <Helmet>
      <link rel="shortcut icon" type="image/png" href={`${favicon32}`} />
      <link
        rel="stylesheet"
        href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
        crossorigin="anonymous"
      />
      <html lang="en" />
    </Helmet>
    <main className="side-panel panel">
      <Header />
      {children()}
      <Footer />
    </main>
    <SideMenu />
  </div>
)

Layout.propTypes = {
  children: PropTypes.func,
}

export default Layout
