import Footer from './footer'
import Navbar from './navbar'
import styles from '/styles/Home.module.css'
import Script from 'next/script'
import { Page } from './styles/generic'
import StyleSelector from './themeselector'


const Layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <Page>
      <Script id="matomo_analytics">
        {`
              var _paq = window._paq = window._paq || [];
              /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
              _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
              _paq.push(["setCookieDomain", "www.neshweb.net"]);
              _paq.push(["disableCookies"]);
              _paq.push(['trackPageView']);
              _paq.push(['enableLinkTracking']);
              (function() {
                var u="//tracking.neshweb.net/";
                _paq.push(['setTrackerUrl', u+'matomo.php']);
                _paq.push(['setSiteId', '2']);
                var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
                g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
              })();
            `}
      </Script>

      <Navbar />
      <StyleSelector></StyleSelector>
      <main className={styles.main}>
        {children}
      </main>
      <Footer />
    </Page>
  );
}

export default Layout;