import type { Metadata } from "next";
import "./globals.css";
import SiteHeader from "@/components/site-header";
import SiteFooter from "@/components/site-footer";
import { AuthProvider } from "@/context/AuthContext";
import { FlashMessageProvider } from "@/context/FlashMessageContext";

export const metadata: Metadata = {
  title: {
    default: "Complex App",
    template: "%s | Complex App",
  },
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {

  return (
    <html lang="en">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossOrigin="anonymous" />
        <script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="sha384-GqVMZRt5Gn7tB9D9q7ONtcp4gtHIUEW/yG7h98J7IpE3kpi+srfFyyB/04OV6pG0" crossOrigin="anonymous"></script>
        {/* <link rel="stylesheet" href="main.css" /> */}
      </head>
      <body
        className={`antialiased`}
      >
        <AuthProvider>
          <FlashMessageProvider>
            <SiteHeader />
            {children}
            <SiteFooter />
          </FlashMessageProvider>
        </AuthProvider>
      </body>
    </html>
  );
}
