import type { Metadata, Viewport } from "next";
import "./globals.css";
import { StoreProvider } from "@/lib/store";
import { BrandStyle, UIProvider } from "@/components/ui";

export const metadata: Metadata = {
  title: "Kada Dental",
  description: "Agenda, expediente, cobros, membresías y aseguradoras para consultorios dentales.",
};
export const viewport: Viewport = { width: "device-width", initialScale: 1, viewportFit: "cover" };

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es-MX">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
        {/* eslint-disable-next-line @next/next/no-page-custom-font */}
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@500;600;700&family=Atkinson+Hyperlegible:wght@400;700&family=JetBrains+Mono:wght@500;700&display=swap" />
      </head>
      <body>
        <StoreProvider>
          <UIProvider>
            <BrandStyle />
            {children}
          </UIProvider>
        </StoreProvider>
      </body>
    </html>
  );
}
