import React, { PropsWithChildren } from 'react'

import { useColorScheme } from '@tidbcloud/uikit'
import { HookFormProvider } from '@tidbcloud/uikit/biz'
import { ThemeProvider, FONT_FAMILY } from '@tidbcloud/uikit/theme'

import '@tidbcloud/uikit/dist/style.css'

const UIKitProvider: React.FC<PropsWithChildren> = ({ children }) => {
  const { colorScheme } = useColorScheme('light')
  return (
    <ThemeProvider
      colorScheme={colorScheme}
      // modals={{ modals }}
      notifications={{ position: 'top-center', zIndex: 9995 }}
      theme={{
        fontFamily: `'moderat', ${FONT_FAMILY}`
      }}
    >
      <HookFormProvider value={null}>{children}</HookFormProvider>
    </ThemeProvider>
  )
}

export default UIKitProvider