'use client'

import React from 'react'
import { ToastContainer } from 'react-toastify'
import { Flowbite } from 'flowbite-react'
import { QueryClient, QueryClientProvider } from 'react-query'

import 'react-toastify/dist/ReactToastify.css'
import './globals.css'

import LoadingScreen from '../components/LoadingScreen'
import { useUIStore } from '../store/uiStore'
import { customTheme } from '../utils/theme'
import { siteConfig } from '../utils/siteConfig'

const queryClient = new QueryClient()

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  const { loading } = useUIStore()

  return (
    <html lang="es">
      <head>
        <title>{siteConfig.APP_NAME}</title>
      </head>

      <body className="text-text-color-01">
        <QueryClientProvider client={queryClient}>
          <Flowbite theme={{ theme: customTheme }}>
            {children}
            <ToastContainer
              position="top-center"
              autoClose={5000}
              hideProgressBar={false}
              newestOnTop={false}
              closeOnClick
              rtl={false}
              pauseOnFocusLoss
              draggable
              pauseOnHover
              theme="light"
            />
            <LoadingScreen show={loading} />
          </Flowbite>
        </QueryClientProvider>
      </body>
    </html>
  )
}
