"use client"

import { useState } from "react"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { httpBatchLink } from "@trpc/client"

import { api } from "./client"
import { transformer } from "@/server/transformer"

function initializeTrpcClient() {
  return api.createClient({
    links: [
      httpBatchLink({
        transformer,
        /**
         * This is locally in Next.js
         */
        url: "http://localhost:3000/api/trpc",
      }),
    ],
  })
}

export default function TrpcProvider({ children }: React.PropsWithChildren) {
  const [queryClient] = useState(() => new QueryClient({}))
  const [trpcClient] = useState(() => initializeTrpcClient())
  return (
    <api.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </api.Provider>
  )
}