import type { Metadata } from "next";
import type { ReactNode } from "react";
import { Suspense } from "react";
import { AuthProvider } from "@/components/auth/AuthProvider";
import { Toaster } from "@/components/Toaster";
import { TopLoadingBar } from "@/components/TopLoadingBar";
import "./globals.css";

export const metadata: Metadata = {
  title: {
    default: "Postvertise — Brands book. Creators get paid.",
    template: "%s — Postvertise",
  },
  description:
    "Brands book verified creators at the listed price. Creators keep 92%. Money is held until the post is live and approved.",
  icons: {
    icon: [
      { url: "/brand/favicon-16x16.png", sizes: "16x16", type: "image/png" },
      { url: "/brand/favicon-32x32.png", sizes: "32x32", type: "image/png" },
    ],
    apple: "/brand/postvertise-mark.png",
  },
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className="flex min-h-screen flex-col" suppressHydrationWarning>
        <a
          className="absolute left-4 top-0 z-100 rounded-pv bg-primary px-4 py-2.5 text-[0.9rem] font-semibold text-white -translate-y-[120%] transition-transform focus:translate-y-3"
          href="#main-content"
        >
          Skip to content
        </a>
        <AuthProvider>
          <Suspense fallback={null}>
            <TopLoadingBar />
          </Suspense>
          {children}
          <Toaster />
        </AuthProvider>
      </body>
    </html>
  );
}
