import Footer from "@components/layouts/Footer";
import Nav from "@components/layouts/Nav";
import { NavigationProjectsCategories, FooterContact } from "@lib/data";
import "@styles/globals.scss";
import localFont from "next/font/local";

const arial = localFont({
  src: [
    {
      path: "../public/font/arial-black.ttf",
      weight: "900",
    },
    {
      path: "../public/font/arial-bold-italic.ttf",
      weight: "700",
      style: "italic",
    },
    {
      path: "../public/font/arial-bold.ttf",
      weight: "700",
    },
    {
      path: "../public/font/arial-italic.ttf",
      weight: "400",
      style: "italic",
    },
    {
      path: "../public/font/arial.ttf",
      weight: "400",
    },
  ],
  variable: "--font-arial",
});

const RootLayout = async ({ children }: { children: React.ReactNode }) => {
  const categories = await NavigationProjectsCategories();
  const footerContact = await FooterContact();

  return (
    <html lang="en" id="root" className={`${arial.variable} font-sans`}>
      <body suppressHydrationWarning={true}>
        <Nav categories={categories} />
        <main>{children}</main>
        <Footer footerContact={footerContact} />
      </body>
    </html>
  );
};

export default RootLayout;
