frontend/src/components/Analytics.tsx

'use client';

import Script from 'next/script';

export default function Analytics() {
  const umamiId = process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID;
  const clarityId = process.env.NEXT_PUBLIC_CLARITY_PROJECT_ID;

  return (
    <>
      {/* Umami Analytics */}
      {umamiId && (
        <Script
          async
                    strategy="lazyOnload"
          src="https://cloud.umami.is/script.js"
          data-website-id={umamiId}
        />
      )}

      {/* Microsoft Clarity */}
      {clarityId && (
        <Script id="microsoft-clarity"           strategy="lazyOnload">
          {`
            (function(c,l,a,r,i,t,y){
                c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
                t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
                y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
            })(window, document, "clarity", "script", "${clarityId}");
          `}
        </Script>
      )}
    </>
  );
}