"use client";

import { Provider } from "@/components/ui/provider";
import {
  UrqlProvider,
  ssrExchange,
  cacheExchange,
  fetchExchange,
  createClient
} from "@urql/next";
import React, { useMemo } from "react";

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode;
}>) {
  const [client, ssr] = useMemo(() => {
    const ssr = ssrExchange({
      isClient: typeof window !== "undefined"
    });
    const client = createClient({
      url: process.env.NEXT_PUBLIC_GRAPHQL_URL || "",
      exchanges: [cacheExchange, ssr, fetchExchange],
      suspense: true
    });

    return [client, ssr];
  }, []);

  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <UrqlProvider client={client} ssr={ssr}>
          <Provider>{children}</Provider>
        </UrqlProvider>
      </body>
    </html>
  );
}
