"use client"

import { useState } from "react"
import { QueryClientProvider } from "@tanstack/react-query"
import { Toaster } from "sonner"
import { createQueryClient } from "@/lib/query-client"

export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(createQueryClient)

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <Toaster
        position="bottom-right"
        toastOptions={{
          style: {
            background: "var(--color-background-secondary)",
            border: "1px solid var(--color-border)",
            color: "var(--color-text-primary)",
            borderRadius: "0px",
            fontFamily: "var(--font-mono)",
            fontSize: "0.75rem",
          },
        }}
      />
    </QueryClientProvider>
  )
}