import type { Metadata } from "next";
import { Geist, Bricolage_Grotesque } from "next/font/google";
import "./globals.css";
import { SIDEBAR_TONE_SCRIPT } from "@/lib/sidebar-tone-script";

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

const bricolage = Bricolage_Grotesque({
  subsets: ["latin"],
  variable: "--font-bricolage",
});

export const metadata: Metadata = {
  title: "Medora – Pharmacy management",
  description: "Pharmacy management and point of sale",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    // suppressHydrationWarning: the inline script sets data-sidebar-tone on <html> before React hydrates
    <html lang="en" className={`${geist.variable} ${bricolage.variable}`} suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: SIDEBAR_TONE_SCRIPT }} />
      </head>
      <body className="antialiased">{children}</body>
    </html>
  );
}