import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import clsx from 'clsx'
import type { PropsWithChildren } from 'react'
import { useEffect } from 'react'

import '@public/styles/global.css'

const client = new QueryClient()

interface LayoutProps extends PropsWithChildren {
	className?: string
}

export default function Layout({ children, className }: LayoutProps) {
	useEffect(() => {
		// Function to update dark mode based on system preference
		const updateDarkMode = (e: MediaQueryList | MediaQueryListEvent) => {
			if (e.matches) {
				document.documentElement.classList.add('dark')
			} else {
				document.documentElement.classList.remove('dark')
			}
		}

		// Create media query
		const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)')

		// Set initial value
		updateDarkMode(darkModeQuery)

		// Listen for changes
		darkModeQuery.addEventListener('change', updateDarkMode)

		// Cleanup
		return () => darkModeQuery.removeEventListener('change', updateDarkMode)
	}, [])

	return (
		<QueryClientProvider client={client}>
			<div className={clsx('flex flex-col items-center w-full min-h-screen', className)}>{children}</div>
		</QueryClientProvider>
	)
}