import React from "react"
import { MaterialUINav } from "material-ui-responsive-nav"
// you will need to import the icons from an external source to use with external links
import { Facebook, Twitter } from "mdi-material-ui"

const Layout = ({children}) => {

  const links = {
    internal: [
      {
        label: "Home",
        link: "/",
      },
      {
        label: "About",
        link: "/about",
      },
      {
        label: "Contact",
        link: "/contact",
      },
    ],
    external: [
      {
        label: "Facebook",
        icon: Facebook,
        link: "https://www.facebook.com",
      },
      {
        label: "Twitter",
        icon: Twitter,
        link: "https://www.twitter.com",
      },
    ],
  }

  return (
    <>
      <MaterialUINav
        global={{
          siteTitle: "My cool site",
          mobileBreakpoint: "xs",
        }}
        navbarConfig={{
          elevate: false,
        }}
        mobileMenuConfig={{
          slideTransition: true,
        }}
        links={links}
      />
      {children}
    </>
  )
}