// MUI Imports
import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'

// Third-party Imports
import { NextIntlClientProvider } from 'next-intl'
import { getLocale, getMessages } from 'next-intl/server'
import 'react-perfect-scrollbar/dist/css/styles.css'

// Type Imports
import type { ChildrenType } from '@core/types'

// Util Imports
import { getSystemMode } from '@core/utils/serverHelpers'

// Style Imports
import '@/app/globals.css'

// Generated Icon CSS Imports
import '@assets/iconify-icons/generated-icons.css'

// Font Imports
import { iran_sans } from '@core/theme'

// Config Imports
import { getMetadata } from '@configs/metadata'

export const metadata = getMetadata()

const RootLayout = async (props: ChildrenType) => {
  const { children } = props

  const locale = await getLocale()
  const messages = await getMessages()

  // Vars
  const systemMode = await getSystemMode()
  const direction = 'rtl' // Fixed RTL direction

  return (
    <html id='__next' dir={direction} className={iran_sans.className} lang={locale} suppressHydrationWarning>
      <body className='flex is-full min-bs-full flex-auto flex-col'>
        <InitColorSchemeScript attribute='data' defaultMode={systemMode} />
        <NextIntlClientProvider locale={locale} messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  )
}

export default RootLayout

