import React from 'react'
import { observer } from 'mobx-react-lite'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import { Center, Stack, VStack } from 'native-base'

const FormScreen: React.FC<any> = observer((props) => {
  return (
    <KeyboardAwareScrollView
      contentContainerStyle={{
        flexGrow: 1,
      }}
      style={{ flex: 1 }}
    >
      <Center my="auto" _dark={{ bg: 'coolGray.900' }} _light={{ bg: 'primary.900' }} flex="1">
        <Stack
          flexDirection={{ base: 'column', md: 'row' }}
          w="100%"
          maxW={{ md: '1400px' }}
          flex={{ base: '1', md: '1' }}
          //flex={{ base: "1", md: "none" --> vertical center }}
          p={10}
        >
          <VStack
            flex="1"
            px="6"
            py="9"
            _light={{ bg: 'lightBg' }}
            _dark={{
              bg: 'darkBg',
              borderColor: 'primary.800',
              borderWidth: '1',
            }}
            space="3"
            justifyContent="space-between"
            borderRadius={{ base: '2xl', md: 'xl' }}
          >
            {props.children}
          </VStack>
        </Stack>
      </Center>
    </KeyboardAwareScrollView>
  )
})

export { FormScreen }