import type { Metadata } from "next";
import { Anuphan, Inter } from "next/font/google";
import "./globals.css";
import { cn } from "@/lib/utils";
import { config } from "@/lib/config";

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

const anuphan = Anuphan({
  variable: "--font-anuphan-family",
  subsets: ["latin", "thai"],
  display: "swap",
});

const siteUrl = config.site.url;

export const metadata: Metadata = {
  title: "Erika!",
  description:
    "แหล่งรวมลิ้งค์ทั้งหมดของช่อง Erika!",
  keywords: ["Erika", "erika!", "erika jjs", "สุดหล่อ", "Roblox", "Discord", "TikTok", "YouTube", "Linktree", "ลิ้งค์"],
  metadataBase: new URL(siteUrl),
  alternates: {
    canonical: "/",
  },
  openGraph: {
    type: "website",
    url: siteUrl,
    siteName: "Erika!",
    images: [
      {
        url: "/avatar.webp",
        width: 512,
        height: 512,
        alt: "Erika! avatar",
      },
    ],
  },
  twitter: {
    card: "summary",
    title: "Erika! - แหล่งรวมลิ้งค์ของช่อง Erika",
    description:
      "แหล่งรวมลิ้งค์ทั้งหมดของช่อง Erika! ติดตามได้ทุกช่องทาง Roblox, Discord, TikTok, YouTube และอื่นๆ",
    images: ["/avatar.webp"],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  icons: {
    icon: "/favicon.webp",
    apple: "/avatar.webp",
  },
};

import { TooltipProvider } from "@/components/ui/tooltip";
import { Toaster } from "sonner";
import { ThemeProvider } from "@/components/theme-provider";
import { PageProgress } from "@/components/page-progress";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="th"
      className={cn(
        "h-full",
        "antialiased",
        inter.variable,
        anuphan.variable,
      )}
      suppressHydrationWarning
    >
      <body className="font-app" suppressHydrationWarning>
        <PageProgress />
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem
          disableTransitionOnChange
        >
        <TooltipProvider>
          <Toaster richColors closeButton position="bottom-right" theme="dark" />
          {children}
        </TooltipProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}