'use client'

import type { Metadata } from 'next'
import './globals.css'
import { SessionProvider } from 'next-auth/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Toaster } from 'sonner'
import { ThemeProvider } from 'next-themes'
import { useState } from 'react'

// Cannot export metadata from client component - move to server
export default function RootLayout({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient({
    defaultOptions: { queries: { staleTime: 30_000, retry: 1 } },
  }))

  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <title>FinServe LMS</title>
        <meta name="description" content="Loan Management System for MFIs and SACCOs" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link rel="alternate icon" href="/favicon.png" type="image/png" />
        <link rel="apple-touch-icon" sizes="192x192" href="/favicon-192x192.png" />
      </head>
      <body className="font-sans antialiased">
        <SessionProvider>
          <QueryClientProvider client={queryClient}>
            <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
              {children}
              <Toaster richColors position="top-right" />
            </ThemeProvider>
          </QueryClientProvider>
        </SessionProvider>
      </body>
    </html>
  )
}
