import "./globals.css";
import {AuthProvider} from "@/context/AuthContext";
import { UserProvider } from "@/context/UserContext";
import { Inter } from "next/font/google";
import Header from "@/components/Header";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import Script from "next/script";
import { getToken } from "@/lib/auth";
import PageHeader from "@/components/PageHeader";
import Page from "./page";

export const metadata = {
    title: "Tiar AI Super Admin",
};

const inter = Inter({ subsets: ["latin"] });

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const token = await getToken();
  return (
    <html lang="en">
        <head>
            <link rel="stylesheet" href="/dist/libs/jsvectormap/dist/jsvectormap.css" />
            <link href="/dist/css/tabler.css" rel="stylesheet" />
            <link href="/dist/css/tabler-flags.css" rel="stylesheet" />
            <link href="/dist/css/tabler-socials.css" rel="stylesheet" />
            <link href="/dist/css/tabler-payments.css" rel="stylesheet" />
            <link href="/dist/css/tabler-vendors.css" rel="stylesheet" />
            <link href="/dist/css/tabler-marketing.css" rel="stylesheet" />
            <link href="/dist/css/tabler-themes.css" rel="stylesheet" />
            <link href="/preview/css/demo.css" rel="stylesheet" />
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css" />
        </head>
        <body className={inter.className}>
            <Script src="/dist/js/tabler-theme.min.js" strategy="afterInteractive"/>
            <div className="page">
              <div className="page-wrapper">
                {/* <TenantProvider> */}
                    <AuthProvider token={token}>
                      <UserProvider>
                        <Header />
                          <Navbar />
                          <PageHeader />
                        {/* <MidtransScript /> */}
                        {children}
                      </UserProvider>
                    </AuthProvider>
                {/* </TenantProvider> */}
                <Footer />
                {/* <Script src="/js/template.js" strategy="afterInteractive" /> */}
              </div>
              <Script src="/dist/libs/list.js/dist/list.min.js?1783307511" strategy="afterInteractive"/>
              <Script src="/dist/libs/jsvectormap/dist/jsvectormap.min.js" strategy="afterInteractive" />
              <Script src="/dist/libs/jsvectormap/dist/maps/world.js" strategy="afterInteractive" />
              <Script src="/dist/libs/jsvectormap/dist/maps/world-merc.js" strategy="afterInteractive" />
              <Script src="/dist/js/tabler.min.js" strategy="lazyOnload" />
              <Script src="/preview/js/demo.min.js" strategy="lazyOnload" />
            </div>
        </body>
    </html>
  );
}