"use client"

import Link from "next/link";
import { ThemeToggle } from "./theme-toggle";
import { Logo } from "./logo";
import {
    QueryClient,
    QueryClientProvider,
} from '@tanstack/react-query'

export function Wrapper(props: { children: React.ReactNode }) {
    return (
        <div className="min-h-screen w-full dark:bg-black bg-white  dark:bg-grid-small-white/[0.2] bg-grid-small-black/[0.2] relative flex justify-center">
            <div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
            <div className="bg-white dark:bg-black border-b py-2 flex justify-between items-center border-border absolute z-50 w-10/12 lg:w-8/12 px-4 md:px-1">
                <Link href="/">
                    <div className="flex gap-2 cursor-pointer">
                        <Logo />
                        <p className="dark:text-white text-black">BETTER-AUTH.</p>
                    </div>
                </Link>
                <div className="z-50 flex items-center">
                    <ThemeToggle />
                </div>
            </div>
            <div className="mt-20 lg:w-7/12 w-9/12">
                {props.children}
            </div>
        </div>
    )
}


const queryClient = new QueryClient()

export function WrapperWithQuery(props: { children: React.ReactNode }) {
    return (
        <QueryClientProvider client={queryClient}>
            {props.children}
        </QueryClientProvider>
    )
}