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 MessengerCustomerChat from 'react-messenger-customer-chat'

require('typeface-maven-pro')
require('typeface-lato')
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
      title="Saburly - Digital Agency that makes you stand out"
      meta={[
        { name: 'description', content: 'We code & design great software' },
        {
          name: 'keywords',
          content: 'software, design, coding, programming, code, consulting',
        },
      ]}
      link={[{ rel: 'shortcut icon', type: 'image/png', href: `${favicon32}` }]}
    />
    <MessengerCustomerChat
      pageId="715686642152482"
      appId="1896398823783343"
      htmlRef="layout"
    />
    <main className="side-panel panel">
      <Header />
      {children()}
      <Footer />
    </main>
    <SideMenu />
  </div>
)

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

export default Layout