text: import React from 'react'
  import PropTypes from 'prop-types'
  import { useStaticQuery, graphql } from 'gatsby'
  
  import Header from './header'
  import Footer from './footer'
  
  import '../styles/layout.css'
  
  const Layout = ({ children }) => {
    const data = useStaticQuery(graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
            logo {
              src
              alt
            }
            logoText
            defaultTheme
            copyrights
            mainMenu {
              title
              path
            }
            showMenuItems
            menuMoreText
          }
        }
      }
    `)
    const {
      title,
      logo,
      logoText,
      defaultTheme,
      mainMenu,
      showMenuItems,
      menuMoreText,
      copyrights,
    } = data.site.siteMetadata
  
    return (
      <div className="container">
        <Header
          siteTitle={title}
          siteLogo={logo}
          logoText={logoText}
          defaultTheme={defaultTheme}
          mainMenu={mainMenu}
          mainMenuItems={showMenuItems}
          menuMoreText={menuMoreText}
        />
        <div className="content">
          {/* <p>
            👋 Hi, Welcome to my blog. I'm Mubaris. You can read my content below, 
            or learn more about me at <a href="/about">About page</a>
          </p> */}
          {children}
        </div>
        <Footer copyrights={copyrights} />
      </div>
    )
  }
  
  Layout.propTypes = {
    children: PropTypes.node.isRequired,
  }
  
  export default Layout
  