import { Box, Avatar, Center, VStack, StackDivider, Spacer, Flex } from '@chakra-ui/react'
import {useGoogleAuth} from 'hooks'
import '../styles/stylesheets/body.css'

const AccountPage = () => {
    const { manager } = useGoogleAuth();
    return (
        <VStack className="account">
            <Avatar name={manager.firstName + " " + manager.lastName} size="2xl" src={manager.imageUrl} alt="profile" />
            <Box w="270px" >
                <VStack 
                    divider={<StackDivider borderColor="gray.200" />}
                    spacing={4}
                    align="center"
                >
                <Box h="5px" className="user-name">{manager.firstName} {manager.lastName}</Box>
                <Box h="28px"
                    w="280px"                      
                    size="sm"
                    align="center"
                    color="white"
                    fontWeight="bold"
                    borderRadius="md"
                    bgGradient="linear(to-r, teal.500,blue.500)"
                    // _hover={{
                    //     bgGradient: "linear(to-r, blue.500, yellow.500)",
                    // }}
                    >{manager.email }
                </Box>
                </VStack>
            </Box>
        </VStack>
    )
}

export default AccountPage