import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import "../public/styles/about.css";
import "../public/styles/bootstrap.min.css";
import "../public/styles/main.css";
import "../public/styles/owl.carousel.css";
import "../public/styles/owl.theme.default.css";
import "../public/styles/slick-theme.css";
import "../public/styles/slick.css";
import "../public/styles/lightbox.css";

import Header from "@/component/Header";
import Footer from "@/component/Footer";
import { ToastContainer } from "react-toastify";
import ClientLoaderEffect from "@/component/ClientLoaderEffect";
import ScrollTop from "@/component/ScroolTop";
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Adda Inn",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <link
          href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css"
          rel="stylesheet"
        />
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
        />
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Dancing+Script:wght@400..700&family=Exo:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"></link>
      </head>
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        <ToastContainer
          position="top-center"
          autoClose={4000}
          style={{ zIndex: "9999" }}
        />
        <ClientLoaderEffect>
          <Header />
          {children}
          <Footer />
          <ScrollTop />
        </ClientLoaderEffect>
      </body>
    </html>
  );
}
