import {Box, ChakraProvider, toCSSVar} from '@chakra-ui/react'
import {ThemeProvider as EmotionThemeProvider} from '@emotion/react'
import {useMemo} from 'react'
import theme from './chakra/theme'

export const RootChakraProvider = ({children}: {children: React.ReactNode}) => {
  return (
    <ChakraProvider resetCSS={true} theme={theme} cssVarsRoot="#coco">
      {children}
    </ChakraProvider>
  )
}

export const ThemeProvider = ({children}: {children: React.ReactNode}) => {
  const computedTheme = useMemo(() => toCSSVar(theme), [theme])

  return (
    <EmotionThemeProvider theme={computedTheme}>
      <Box id="coco">{children}</Box>
    </EmotionThemeProvider>
  )
}