import { Inter } from "next/font/google";
import { Creepster } from "next/font/google";
import "./globals.css";
import Header from "../components/layout/Header";
import AppProvider from "../components/AppContext";
import { Toaster } from "react-hot-toast";

const inter = Inter({ subsets: ["latin"] });
const creepster = Creepster({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-creepster',
  weight: '400',
})

export const metadata = {
  title: "Puffy Dough | Donuts, Coffee, and Drinks",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <link rel="shortcut icon" href="/favicon.png" />
      <body className={`${inter.className} ${creepster.variable}`} suppressHydrationWarning={true}>
        <AppProvider>
          <Toaster/>
          <Header/>
          {children}
        </AppProvider>
      </body>
    </html>
  );
}
