import Script from "next/script";
import React, { Fragment } from "react";
import { GoogleTagManager } from "@next/third-parties/google";

export const Tracking = ({ googleTagManagerID, nonce }) => (
    <>
        <Script
            strategy="afterInteractive"
            src={`https://www.googletagmanager.com/gtag/js?id=${googleTagManagerID}`}
        />
        <Script
            id="google-analytics"
            strategy="afterInteractive"
            dangerouslySetInnerHTML={{
                __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());

                gtag('consent', 'default', {
                    'analytics_storage': 'denied'
                });
                
                gtag('config', '${googleTagManagerID}', {
                    page_path: window.location.pathname,
                });
                `,
            }}
        />

        {/* <GoogleAnalytics gaId={googleTagManagerID} /> */}

        {/* <GoogleTagManager gtmId={googleTagManagerID} /> */}
    </>
);

export const TrackingNoScript = ({ googleTagManagerID }) => (
    <Fragment>
        <noscript>
            <iframe
                title="google analytics"
                src={`https://www.googletagmanager.com/ns.html?id=${googleTagManagerID}`}
                height="0"
                width="0"
                style={{ display: "none", visibility: "hidden" }}
            />
        </noscript>
    </Fragment>
);