'use client'

import { LanguageProvider, useLanguage } from '@/lib/i18n/LanguageProvider'
import { QueryProvider } from '@/components/query-provider'
import type { Translations } from '@/lib/i18n/load-translations'
import type { ReactNode } from 'react'
import { useEffect } from 'react'

const RTL_LANGUAGES = ['ar', 'fa']

function DirWrapper({ children }: { children: ReactNode }) {
  const { language } = useLanguage()
  const dir = RTL_LANGUAGES.includes(language) ? 'rtl' : 'ltr'

  useEffect(() => {
    document.documentElement.lang = language
    document.documentElement.dir = dir
  }, [language, dir])

  return <div dir={dir} className="contents">{children}</div>
}

export function PublicProviders({ 
  children, 
  initialLanguage = 'en', 
  initialTranslations 
}: { 
  children: ReactNode
  initialLanguage?: string
  initialTranslations?: Translations
}) {
  return (
    <QueryProvider>
      <LanguageProvider initialLanguage={initialLanguage as any} initialTranslations={initialTranslations}>
        <DirWrapper>
          {children}
        </DirWrapper>
      </LanguageProvider>
    </QueryProvider>
  )
}