import localFont from "next/font/local";
import Script from "next/script";

import "swiper/swiper-bundle.css";
import "./globals.css";
import QueryProvider from "@/providers/QueryProvider";

// FONTS - All local fonts
const aeroport = localFont({
  src: "../fonts/Aeroport.otf",
  variable: "--font-aeroport",
});

const roboto = localFont({
  src: [
    {
      path: "../fonts/roboto/Roboto-Light.ttf",
      weight: "300",
      style: "normal",
    },
    {
      path: "../fonts/roboto/Roboto-Regular.ttf",
      weight: "400",
      style: "normal",
    },
    {
      path: "../fonts/roboto/Roboto-Bold.ttf",
      weight: "700",
      style: "normal",
    },
  ],
  variable: "--font-roboto",
});

const mw = localFont({
  src: "../fonts/merriweather/Merriweather-Bold.ttf",
  weight: "700",
  variable: "--font-mw",
});

const mw_sans = localFont({
  src: [
    {
      path: "../fonts/merriweather-sans/MerriweatherSans-Light.ttf",
      weight: "300",
      style: "normal",
    },
    {
      path: "../fonts/merriweather-sans/MerriweatherSans-Regular.ttf",
      weight: "400",
      style: "normal",
    },
    {
      path: "../fonts/merriweather-sans/MerriweatherSans-Bold.ttf",
      weight: "700",
      style: "normal",
    },
  ],
  variable: "--font-mwsans",
});

const alexandria = localFont({
  src: "../fonts/alexandria/Alexandria-Regular.woff2",
  variable: "--font-alexandria",
});

export const metadata = {
  title: "Turkmen TV",
};

interface IProps {
  children: React.ReactNode;
}

export default function RootLayout({ children }: IProps) {
  return (
    <html
      lang="tm"
      className={`${aeroport.variable} ${mw.variable} ${roboto.variable} ${mw_sans.variable} ${alexandria.variable}`}
    >
      <head>
        <link rel="icon" href="/logo.png" sizes="any" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
        ></meta>
      </head>
      <body className="relative overflow-x-hidden">
        <QueryProvider>{children}</QueryProvider>
      </body>

      <Script
        id="ganalytics-import"
        async
        src="https://www.googletagmanager.com/gtag/js?id=G-F2267QXY9T"
      ></Script>
      <Script id="ganalytics-body">
        {` 
  window.dataLayer = window.dataLayer || []; 
  function gtag(){dataLayer.push(arguments);} 
  gtag('js', new Date()); 
 
  gtag('config', 'G-F2267QXY9T');`}
      </Script>
    </html>
  );
}
