import React, { useMemo} from 'react'
import { Link } from 'react-router-dom'
import { useGoogleAuth} from 'hooks'
import { Box, Heading, Flex, Spacer, Button, Image, Avatar } from "@chakra-ui/react"
// import Logo from '../img/logo.png'

import { Logo, ColorModeToggle  } from 'atoms'


const Nav = () => {
    const { isSignedIn, signOut, signIn, manager } = useGoogleAuth();
    const handleAuth = () => { isSignedIn ? signOut() : signIn();}
    const authLinkText = useMemo(() => isSignedIn ? "Logout" : "Login", [isSignedIn]);
    const userIcon = isSignedIn && <Avatar 
        name={`${manager.firstName} ${manager.lastName}`} 
        boxSize="40px" 
        borderRadius="full"  
        src={manager.imageUrl} 
        alt="Profile icon"
    />

    return (
        <Flex>
           <Logo/>
           <ColorModeToggle/>
        </Flex>
    )
}

export default Nav