import type { Metadata, Viewport } from "next";
import { Inter, JetBrains_Mono } from "next/font/google";
import "./globals.css";
import { QueryProvider } from "@/providers/QueryProvider";
import { RegistryProvider } from "./registry-provider";
import { Toaster } from "sonner";
import ScreenModal from "@/components/common/ScreenModal";

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

const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-jetbrains-mono",
  display: "swap",
});

export const metadata: Metadata = {
  title: "WACE 솔루션 - WACE",
  description: "제품 수명 주기 관리(PLM) 솔루션",
  keywords: ["WACE", "PLM", "Product Lifecycle Management", "WACE", "제품관리"],
  authors: [{ name: "WACE" }],
  icons: {
    icon: "/favicon.ico",
  },
};

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko" className="h-full">
      <body className={`${inter.variable} ${jetbrainsMono.variable} h-full bg-white font-sans antialiased`}>
        <div id="root" className="h-full">
          <QueryProvider>
            <RegistryProvider>{children}</RegistryProvider>
            <Toaster position="top-right" />
            <ScreenModal />
          </QueryProvider>
          {/* Portal 컨테이너 */}
          <div id="portal-root" data-radix-portal="true" />
        </div>
      </body>
    </html>
  );
}
