import { HStack, Image, Flex, IconButton, Spacer, Stack } from '@chakra-ui/react';
import { BiRightIndent, BiLeftIndent } from 'react-icons/bi';
import { FiLogOut } from 'react-icons/fi';
import path from 'path';

import { useAuth } from '../../hooks';

const NavBar = ({ isHomeLayout = false, navSize, onChangeNavSize }) => {
  const { logout } = useAuth();

  return (
    <HStack flex={1}>
      <Stack>
        <Flex display={isHomeLayout && 'none'} p="5%" flexDir="column" alignItems="flex-start" as="nav">
          <IconButton
            background="none"
            color="#fff"
            fontSize="2xl"
            _hover={{ background: 'none' }}
            icon={navSize === 'small' ? <BiRightIndent /> : <BiLeftIndent />}
            onClick={onChangeNavSize}
          />
        </Flex>
      </Stack>
      <Image src={path.join(__dirname, '/logo.png')} aspectRatio="16:9" height="70px" />
      <Spacer />
      {!isHomeLayout && (
        <IconButton
          color="#fff"
          _hover={{ background: 'green.700' }}
          background="none"
          mr={2}
          onClick={logout}
          icon={<FiLogOut />}
        />
      )}
    </HStack>
  );
};

export default NavBar;
