"use client";

import { useState } from "react";

import { QueryClientProvider } from "@tanstack/react-query";

import { Toaster } from "sonner";

import { makeQueryClient } from "@/lib/query";

import { TooltipProvider } from "@/components/ui/tooltip";

export function Providers({ children }: { children: React.ReactNode }) {

  const [queryClient] = useState(makeQueryClient);

  return (

    <QueryClientProvider client={queryClient}>

      <TooltipProvider delayDuration={200} skipDelayDuration={400}>

        {children}

        <Toaster

          position="bottom-right"

          theme="dark"

          richColors

          closeButton

          toastOptions={{

            classNames: {

              toast:

                "!bg-[var(--color-bg-overlay)] !border !border-[var(--color-border-default)] !text-[var(--color-fg-primary)] !rounded-[var(--radius-md)]",

            },

          }}

        />

      </TooltipProvider>

    </QueryClientProvider>

  );

}