'use client'

import { MantineProvider, localStorageColorSchemeManager } from '@pikku/mantine/core'
import { DatesProvider } from '@mantine/dates'
import { DAYJS_LOCALE_MAP, theme } from '@heygermany/mantine-theme'

import 'dayjs/locale/en'
import 'dayjs/locale/de'
import 'dayjs/locale/uk'
import 'dayjs/locale/tr'
import 'dayjs/locale/bs'
import 'dayjs/locale/sq'
import 'dayjs/locale/vi'
import 'dayjs/locale/es'
import 'dayjs/locale/hi'
import 'dayjs/locale/ar'

const manager = localStorageColorSchemeManager({ key: 'mantine-color-scheme' })

export function ThemeProvider({
  children,
  locale = 'en',
}: {
  children: React.ReactNode
  initial?: 'light' | 'dark' | 'auto'
  locale?: string
}) {
  const dateLocale = DAYJS_LOCALE_MAP[locale] || 'en'

  return (
    <MantineProvider
      theme={theme}
      defaultColorScheme="light"
      colorSchemeManager={manager}
    >
      <DatesProvider settings={{ locale: dateLocale }}>
        {children}
      </DatesProvider>
    </MantineProvider>
  )
}