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

import { LogoutAllDevices } from './LogoutAllDevices'
import { TwoFactorAuthentication } from './MFA'
import { Password } from './Password'
import { Profile } from './Profile'

export const General = () => {
  const colorScheme = useComputedColorScheme()

  return (
    <Box
      h="100%"
      pt={24}
      sx={(theme) => ({
        background: colorScheme === 'dark' ? undefined : theme.colors.carbon[1]
      })}
    >
      <Stack justify="flex-start" gap="xl">
        <Profile />
        <Password />
        <TwoFactorAuthentication />
        <LogoutAllDevices />
      </Stack>
    </Box>
  )
}