import { Box, BackgroundImage, useComputedColorScheme } from '@tidbcloud/uikit'

import darkBg from 'media/signup-bg-v2-dark.svg'
import bg from 'media/signup-bg-v2.svg'

export const BackgroundMask: React.FC<React.PropsWithChildren<{ enableDark?: boolean }>> = ({
  children,
  enableDark = false
}) => {
  const colorScheme = useComputedColorScheme()
  const isDark = colorScheme === 'dark' && enableDark

  return (
    <Box sx={() => ({ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 })}>
      <BackgroundImage w={'100%'} h={'100%'} src={isDark ? darkBg : bg}>
        {children}
      </BackgroundImage>
    </Box>
  )
}