import type { Metadata } from 'next';
import Providers from '@/components/layout/Providers';

import '@/styles/globals.css';
import AsyncHeader from '@/components/layout/Header/AsyncHeader';
interface LayoutProps {
  params: Promise<IParams>;
  children: React.ReactNode;
}

export const metadata: Metadata = {
  title: 'MAF Egypt Business Park',
  description: 'MAF Egypt Business Park'
};

export default async function RootLayout({ params, children }: LayoutProps) {
  const { locale } = await params;

  return (
    <html lang={locale}>
      <head>
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <link rel="icon" href="/favicon.ico" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin=""
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
          rel="stylesheet"
        />
        {/* eslint-disable-next-line @next/next/next-script-for-ga */}
        <script
          dangerouslySetInnerHTML={{
            __html: `
          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','GTM-5SZXVTJC');
          `
          }}
        />
      </head>
      <body>
        {/* eslint-disable-next-line @next/next/next-script-for-ga */}
        <noscript>
          <iframe
            src="https://www.googletagmanager.com/ns.html?id=GTM-5SZXVTJC"
            height="0"
            width="0"
            style={{ display: 'none', visibility: 'hidden' }}></iframe>
        </noscript>
        <Providers>
          <div className="flex flex-col min-h-screen">
            <main className="grow [&>*:last-child:not(:only-child)]:mb-0">
              <AsyncHeader />
              {children}
            </main>
          </div>
        </Providers>
      </body>
    </html>
  );
}
