import { Box, Avatar, Icon, VStack, Text } from '@chakra-ui/react';
import { FiCamera } from 'react-icons/fi';
import { capitalize } from 'lodash';

AvatarUpload.defaultProps = {
  me: {
    firstName: 'An',
    lastName: 'Quan',
  },
};

function AvatarUpload({ me, ...props }) {
  const { firstName, lastName } = me;
  return (
    <VStack {...props}>
      <Box
        display="flex"
        flexDir="column"
        justifyContent="center"
        alignItems="center"
        rounded="full"
        overflow="hidden"
        position="relative"
      >
        <Avatar size="xl" name={`${firstName} ${lastName}`} />
        <Box
          _hover={{
            opacity: '1',
          }}
          display="flex"
          opacity={0}
          justifyContent="center"
          alignItems="center"
          position="absolute"
          bottom="0"
          right="0"
          left="0"
          bg="gray.200"
          rounded="full"
          p="1"
          cursor="pointer"
        >
          <Icon as={FiCamera} color="gray.700" />
        </Box>
      </Box>
      <Box>
        <Text fontSize="lg" fontWeight="bold">
          {capitalize(firstName)} {capitalize(lastName)}
        </Text>
      </Box>
    </VStack>
  );
}

AvatarUpload.propTypes = {};

export default AvatarUpload;
