import { Box, Center, Flex } from '@chakra-ui/react'
import React, { useEffect } from 'react'
import CustomRouter from '../../CustomRouter'
import { useCurrentUser } from '../../hooks/user/useCurrentUser'
import EmptySlider from './components/Slider'

interface IAuthLayoutProps {
  children: React.ReactNode
}

const AuthLayout: React.FunctionComponent<IAuthLayoutProps> = (props) => {
  const { children } = props
  const { isLoggedIn } = useCurrentUser()

  useEffect(() => {
    if (isLoggedIn) {
      const { redirectUrl = '/' } = CustomRouter.query
      CustomRouter.push(`${redirectUrl}`)
    }
  }, [isLoggedIn])

  return (
    <Flex minH={'100vh'} pos={'relative'}>
      <Center flex={3} flexDir={'column'} display={{ base: 'none', lg: 'flex' }} p={'20px'}>
        <EmptySlider />
        {/* <Image
          alt={'auth img'}
          src={'https://res.cloudinary.com/andrewphan/image/upload/v1654139035/horse-verse/HVerse_qcdrzu.jpg'}
        /> */}
      </Center>
      <Box flex={2} p={'20px'}>
        {children}
      </Box>
    </Flex>
  )
}

export default AuthLayout