import React from "react";
import {HStack, Image, Text,} from "@chakra-ui/react";

let backVector = "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/babuBack.svg?alt=media&token=ab0210b3-0b99-4d5a-b9c2-ab942eedc5da";
let avatar = `https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/avatar.svg?alt=media&token=2cf6fab3-48fd-402f-8d49-e1a1ae3bca14`;

interface headerProps {
    goBack?: any;
    isBack?: boolean;
    title: string;
}

const Header = ({title, goBack, isBack}: headerProps) => {
    return (
        <>
            <HStack
                h="100px"
                bg="rgba(247, 248, 252, 1)"
                borderBottom="1px solid #DFE0EB"
                minW="1185px"
                alignItems="center"
                justifyContent="space-between"
            >
                <HStack alignItems="center" spacing="24px" px="38.25px">
                    {isBack !== false && (
                        <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>

                <HStack
                    alignItems="center"
                    spacing="16px"
                    h="32px"
                    pl="16.25px"
                    pr="38.25px"
                    borderLeft="1px solid #DFE0EB"
                >
                    <Text
                        fontFamily="MaisonDemi"
                        fontSize="14px"
                        fontStyle="normal"
                        fontWeight="600"
                        lineHeight="20px"
                        letterSpacing="0.20000001192092896px"
                        textAlign="right"
                    >
                        Admin
                    </Text>
                    <Image
                        borderRadius="full"
                        border="1px solid #DFE0EB"
                        p="2px"
                        src={avatar}
                    />
                </HStack>
            </HStack>
        </>
    );
};

export default Header;