import PageFooter from './footer';
import PageNavbar from './navbar';
import Script from 'next/script';
import { Page, Main } from './styles/generic';

const Layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <Page>
      <Script id="matomo_analytics"
        defer src='https://static.cloudflareinsights.com/beacon.min.js'
        data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
      </Script>
      <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>

      <PageNavbar />
      <Main>
        {children}
      </Main>
      <PageFooter />
    </Page>
  );
}

export default Layout;