import type { Metadata, Viewport } from "next";
import type { ReactNode } from "react";
import Script from "next/script";
import "./globals.css";
import { TelegramProvider } from "@/components/TelegramProvider";
import { CartProvider } from "@/context/CartContext";
import BottomNav from "@/components/BottomNav";

export const metadata: Metadata = {
  title: "Шины и Диски | Магазин",
  description: "Интернет-магазин шин и дисков в Telegram. Каталог от b2b.4tochki.ru.",
};

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  themeColor: "#0b1220",
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="ru">
      <head>
        <Script src="https://telegram.org/js/telegram-web-app.js" strategy="beforeInteractive" />
      </head>
      <body className="bg-[var(--tg-bg)] text-[var(--tg-text)] antialiased">
        <TelegramProvider>
          <CartProvider>
            <div className="mx-auto min-h-screen max-w-xl pb-24">{children}</div>
            <BottomNav />
          </CartProvider>
        </TelegramProvider>
      </body>
    </html>
  );
}
