import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { Navbar } from "./components/Navbar";
import { Footer } from "./components/Footer";
import Providers from "./providers";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: {
    default: "Dsr Inventory & STO",
    template: "%s | Dsr Inventory & STO",
  },
  description:
    "Aplikasi Inventory dan Stock Take Opname (STO) untuk manajemen stok barang, pencatatan mutasi, dan monitoring persediaan secara real-time.",
  keywords: [
    "inventory",
    "stok barang",
    "stock opname",
    "sto",
    "warehouse",
    "manajemen gudang",
    "persediaan",
  ],
  authors: [{ name: "Dsr System" }],

  icons: {
    icon: [
      { url: "/images/logo.png", sizes: "32x32", type: "image/png" },
      { url: "/images/logo.png", sizes: "192x192", type: "image/png" }
    ],
    shortcut: ["/images/logo.png"],
    apple: [
      { url: "/images/logo.png", sizes: "180x180", type: "image/png" }
    ],
  },

  openGraph: {
    title: "Dsr Inventory & STO",
    description:
      "Kelola inventory dan lakukan Stock Take Opname dengan mudah, cepat, dan akurat.",
    url: "http://localhost:3000",
    siteName: "Dsr Inventory & STO",
    images: [
      {
        url: "/images/logo.png",
        width: 512,
        height: 512,
        alt: "Dsr Inventory Logo",
      },
    ],
    locale: "id_ID",
    type: "website",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="id"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased bg-white`}
    >
      <body className="min-h-screen flex flex-col bg-white text-gray-800">
          <Providers>

            {/* ================= NAVBAR ================= */}
            <Navbar />

            {/* ================= MAIN CONTENT ================= */}
            <main className="flex-1 w-full max-w-350 mx-auto px-4 md:px-6 lg:px-8 py-6">
              {children}
            </main>
          </Providers>

        {/* ================= FOOTER ================= */}
        <Footer />
      </body>
    </html>
  );
}