import type { Metadata, Viewport } from "next";
import { Alexandria, Bricolage_Grotesque, Readex_Pro } from "next/font/google";
import "@fontsource-variable/material-symbols-outlined/full.css";
import "./globals.css";
import SmoothScroll from "@/components/providers/SmoothScroll";

const bricolage = Bricolage_Grotesque({
  subsets: ["latin"],
  axes: ["opsz"],
  variable: "--font-bricolage",
  display: "swap",
});
const readex = Readex_Pro({
  subsets: ["latin", "arabic"],
  weight: ["300", "400", "500", "600", "700"],
  variable: "--font-readex",
  display: "swap",
});
const alexandria = Alexandria({
  subsets: ["arabic", "latin"],
  weight: ["500", "600", "700"],
  variable: "--font-alexandria",
  display: "swap",
});

export const metadata: Metadata = {
  title: "Discover Syria",
  description:
    "Ancient cities, Mediterranean shores and desert ruins. Plan your journey through Syria's destinations, experiences, food and events.",
};

export const viewport: Viewport = { themeColor: "#2A1B3D" };

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${bricolage.variable} ${readex.variable} ${alexandria.variable}`}>
      <body>
        <SmoothScroll>{children}</SmoothScroll>
      </body>
    </html>
  );
}