import { useEffect } from 'react';
import Script from 'next/script';
import type { AppProps } from 'next/app';
import '../styles/globals.css';

// Add a TypeScript declaration for the clarity property on the window object
declare global {
  interface Window {
    clarity: (...args: any[]) => void;
  }
}

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    // Initialize Clarity
    if (typeof window !== 'undefined') {
      window.clarity = window.clarity || function () {
        (window.clarity as any).q = (window.clarity as any).q || [];
        (window.clarity as any).q.push(arguments);
      };
      window.clarity('set', 'projectId', 'qkmypl9uld');
    }
  }, []);

  return (
    <>
      <Script
        id="clarity-script"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            (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", "YOUR_CLARITY_PROJECT_ID");
          `,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;