Analytics Integration

"use client";

import Script from "next/script";
import { useEffect, useState } from "react";

const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;

export function GoogleAnalytics() {
  const [consentGiven, setConsentGiven] = useState(false);

  useEffect(() => {
    const consent = localStorage.getItem("cookieConsent");
    requestAnimationFrame(() => setConsentGiven(consent === "accepted"));

    // Listen for changes in localStorage (when user accepts)
    const handleStorage = () => {
      const updated = localStorage.getItem("cookieConsent");
      setConsentGiven(updated === "accepted");
    };

    window.addEventListener("storage", handleStorage);
    window.addEventListener("cookieConsentUpdate", handleStorage);

    return () => {
      window.removeEventListener("storage", handleStorage);
      window.removeEventListener("cookieConsentUpdate", handleStorage);
    };
  }, []);

  if (!consentGiven || !GA_TRACKING_ID) return null;

  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="lazyOnload">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${GA_TRACKING_ID}', {
            anonymize_ip: true
          });
        `}
      </Script>
    </>
  );
}

"use client";

import { useEffect, useState } from "react";
import { Button } from "./ui/button";
import Link from "next/link";
import { Card, CardContent, CardFooter } from "./ui/card";
import content from "@/utils/content.json";
import { useLanguageStore } from "@/store/language-store";

export function CookieConsent() {
  const { lang } = useLanguageStore();
  const [showWarning, setShowWarning] = useState<boolean>(false);

  useEffect(() => {
    const consent = localStorage.getItem("cookieConsent");
    if (!consent) {
      requestAnimationFrame(() => setShowWarning(true));
    }
    const open = () => setShowWarning(true);
    window.addEventListener("openCookieConsent", open);
    return () => {
      window.removeEventListener("openCookieConsent", open);
    };
  }, []);

  const handleConsent = (accepted: boolean) => {
    localStorage.setItem("cookieConsent", accepted ? "accepted" : "declined");
    setShowWarning(false);

    // Trigger event for GoogleAnalytics to load
    window.dispatchEvent(new Event("cookieConsentUpdate"));
  };

  if (!showWarning) return null;
  return (
    <Card className="fixed bottom-2 left-2 max-w-sm z-50">
      <CardContent>
        <p className="text-muted-foreground">
          {content.cookieConsent.message[lang]}
        </p>
      </CardContent>
      <CardFooter className="flex items-center">
        <Button variant="link" size="sm" className="mr-auto text-xs">
          <Link href="/privacy-policy">
            {content.cookieConsent.privacy[lang]}
          </Link>
        </Button>
        <Button
          size="sm"
          variant="ghost"
          onClick={() => handleConsent(false)}
        >
          {content.cookieConsent.decline[lang]}
        </Button>
        <Button
          size="sm"
          variant="secondary"
          onClick={() => handleConsent(true)}
        >
          {content.cookieConsent.accept[lang]}
        </Button>
      </CardFooter>
    </Card>
  );
}

// Check if analytics is loaded
if (typeof window !== 'undefined' && window.gtag) {
  window.gtag('event', 'event_name', {
    event_category: 'category',
    event_label: 'label',
    value: 'value'
  });
}