import {Avatar, Box, Divider, Flex, Heading, HStack, Image, Spacer, Text, WrapItem} from "@chakra-ui/react";
import React from "react";

let backVector = "https://firebasestorage.googleapis.com/v0/b/mvprun-auth.appspot.com/o/babuBack.svg?alt=media&token=9efcaf65-9f33-4b80-b04f-c0f21613880c";

function TopBar(props: any) {
    const {isEditPage, goBack, title} = props;
    let leftContent = <Heading
        fontSize="24px">
        {title}
    </Heading>;
    if (isEditPage) {
        leftContent = <HStack alignItems="center" spacing="24px" px="38.25px">
            <Image
                src={backVector}
                onClick={goBack ? goBack : console.log("Go back")}
                cursor={"pointer"}
            />
            <Text
                fontFamily="MaisonBold"
                fontSize="24px"
                fontStyle="normal"
                fontWeight="700"
                lineHeight="24px"
                letterSpacing="0.30000001192092896px"
                textAlign="left"
            >
                {title}
            </Text>
        </HStack>;
    }
    return (
        <Flex
            bg="transparent">
            <Box>
                {leftContent}
            </Box>
            <Spacer/>
            <Box>
                <HStack>
                    <Divider orientation="vertical" bg="#DFE0EB"
                             border="1px solid #DFE0EB" w="1px" h="32px"/>
                    <Text
                        fontWeight="bold" fontSize="14px">
                        Admin
                    </Text>
                    <WrapItem h="44px" w="44px" borderRadius="50%"
                              border="1.5px solid #DFE0EB">
                        <Avatar
                            h="100%" w="100%"
                            name='Kent Dodds'
                            src='https://bit.ly/kent-c-dodds'/>
                    </WrapItem>
                </HStack>
            </Box>

        </Flex>
    );
}

export default TopBar;