import { Inter } from "next/font/google";
import { Toaster } from "react-hot-toast";
import "./globals.css";
import AppProvider from "@/lib/providers/AppProvider";
import { TooltipProvider } from "@/components/ui/tooltip";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        {/* ----------- TITLE ----------- */}
        <title>TaxFend</title>

        {/* ----------- TAGLINE / META DESCRIPTION ----------- */}
        <meta name="TaxFend" content="TaxFend managment" />

        {/* ----------- FAVICON ----------- */}
        <link rel="icon" href="/assets/logo.png" type="image/x-icon" />
        {/* You can also add PNG or SVG */}
        {/* <link rel="icon" href="/logo.png" sizes="32x32" /> */}
      </head>

      <body className={inter.className} suppressHydrationWarning={true}>
        <AppProvider>
          <TooltipProvider>{children}</TooltipProvider>
        </AppProvider>
        <Toaster
          position="top-right"
          toastOptions={{
            duration: 4000,
            style: {
              background: "#363636",
              color: "#fff",
            },
            success: {
              duration: 3000,
              iconTheme: {
                primary: "hsl(180, 30%, 35%)",
                secondary: "#fff",
              },
            },
            error: {
              duration: 4000,
              iconTheme: {
                primary: "#ef4444",
                secondary: "#fff",
              },
            },
          }}
        />
      </body>
    </html>
  );
}
