import type { Metadata } from "next";
import localFont from 'next/font/local';
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { Suspense } from "react";
import Head from "next/head";

const gillSans = localFont({
  src: [
    {
      path: '../../public/fonts/Gill Sans Bold.otf',
      weight: '700'
    },
  
    {
      path: '../../public/fonts/Gill Sans Medium.otf',
      weight: '500'
    },
    {
      path: '../../public/fonts/Gill Sans.otf',
      weight: '400'
    },
    {
      path: '../../public/fonts/Gill Sans Light.otf',
      weight: '300'
    }
  ],
  variable: '--font-gillSans'
})

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Deeba Limited",
  description: "Build, Empower, Afrika",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
       <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <body
        className={`${geistSans.variable} ${geistMono.variable} ${gillSans.variable} font-sans antialiased`}
      >
        <Suspense>
           {children}
        </Suspense>
      </body>
    </html>
  );
}
