import "../styles/globals.css"

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import type { AppType } from "next/dist/shared/lib/utils"

import { AuthRedirect, Button } from "@/components"
import { ModeToggle } from "@/components/mode-toggle"
import { ThemeProvider } from "@/components/theme-provider"
import { useLogoutMutation } from "@/services"

const queryClient = new QueryClient()

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <QueryClientProvider client={queryClient}>
      <AuthRedirect>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <Header />
          <Component {...pageProps} />
        </ThemeProvider>
      </AuthRedirect>
    </QueryClientProvider>
  )
}

function Header() {
  const { mutate: logout } = useLogoutMutation()
  const handleLogout = () => {
    logout()
  }
  return (
    <header className={"flex items-center justify-between p-4"}>
      <h1 className={"text-3xl"}>Tasks</h1>
      <div className={"flex gap-4"}>
        <ModeToggle />
        <Button onClick={handleLogout} variant={"outline"}>
          Logout
        </Button>
      </div>
    </header>
  )
}

export default MyApp